How do I create a fade-in load effect, one after another image

问题

I've got inspired by the thumb loading effect on this page, but honestly got no clue how to create such effect, on each thumb.

Who could point me in the right direction, or even give me some lines of codes?

I've seen some other topics related, but those won't work in a situation where many images will be loaded, one after another.

Thanks!

回答1:

The script :

$(function(){
    $("#listing .img").each(function(index) {
        $(this).hide().delay(100*index).fadeIn(300);
    });
});

Then the html :

<div id="listing">
  <div class="img"><img src="http://www.marclagrange.com/files/thumbs/medium/snow-white20091.jpg" alt=""  width="235" height="180" /></div>
  <div class="img"><img src="http://www.marclagrange.com/files/thumbs/medium/soeur-sourire70x50.jpg" alt=""  width="235" height="180" /></div>
</div>

And do not forget to include jquery.

Here is a jsFiddle.

来源：https://stackoverflow.com/questions/20072807/how-do-i-create-a-fade-in-load-effect-one-after-another-image