jQuery는 무작위로 이미지를 희미하게합니다

Question

작은 이미지가 많이있는 컨테이너가 있습니다.

<div id="container">
   <img src="1.jpg" />
   <img src="2.jpg" />
   <img src="3.jpg" />
   ...
   <img src="100.jpg" />
</div>

나는 불투명도를 0으로 설정했다. 예를 들어 5 일, 1 일, 55 일 ...

모든 제안, 고맙습니다

Answer 1

이 시도

<script type="text/javascript">

//generate random number
var randomnumber=Math.floor(Math.random()*$("#container").children().length);
$(function() {
    //hide all the images (if not already done)
    $("#container > img").hide();

    //set timeout for image to appear (set at 500ms)
    setTimeout(function(){
       //fade in the random index of the image collection
       $("#container > img:eq(" + randomnumber + ")").fadeIn();
    }, 500);       
});
</script>

Answer 2

숫자 패턴으로 각 이미지에 ID를 넣은 다음 Math.Random을 사용하여 임의의 생성 ID로 이미지를 퇴색시킵니다.

function getImage(minim,maxim) {
    return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}

Answer 3

반 초 후 사라지거나 반 초 안에 사라지는 경우는 명확하지 않습니다. 그러나 페이드와 함께 가고 있습니다 ~ 후에 반 초. 그렇지 않으면 settimeout ()가있는 물건을 무시하십시오.

하고 싶은 일에 대한 일반적인 개요는 다음과 같습니다.
페이지가로드되었을 때 기능을 작성합니다.
해당 기능은 최소의 무작위 숫자를 생성해야하며 최대는 #Container 요소 마이너스 1의 어린이 수로 최대를 생성해야합니다.
#Container의 자녀를 임의의 숫자로 제공 한 색인으로 페이드하십시오.

Pusdo Code (jQuery로 무엇이든 한 일 이후 오랜 시간입니다. 또는 그 문제에 대한 JavaScript)

function onDocumentReady(){
    setTimeout(500, "fadeInRandom()");
}

function fadeInRandom(){    
    var numElements = $("#container").children().length;
    var randomElem = Math.random() * (numElements-1);
    $("#container").children()[randomElem].fadeIn();
}

Answer 4

대신 모든 이미지를 퇴색 시키려면 모든 임의의 물건을 사용할 필요가 없으며 500ms에서 1 초 사이의 임의 숫자 만 지연시킬 필요가 없습니다. 어쨌든 숨은 기능을 넣어야합니다. 또는 불투명도로 애니메이션 CSS를 사용하십시오.

$('#container img').each(function(index) {

   $(this).delay( Math.random()*500+500 ).fadeIn();

});

당신은 그보다 더 간단한 것을 찾지 못하고 같은 효과를 가지고 있습니다.

Answer 5

생성 된 임의의 숫자를 사용하여 이미지의 'SRC'속성을 만들고 그에 따라 jQuery 선택기를 빌드합니다.

setInterval ( showRandomImage, 500 );

function showRandomImage()
{
    var randNo = Math.floor(Math.random() * 101);
    $("#container > img[src=" + randNo + "'.jpg']")
                   .animate({opacity: 0}, 500).fadeIn('slow');
}