如何创建淡入加载效果，一个接一个的图像 [英] 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.

谢谢！

推荐答案

剧本：

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

然后是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>

并且不要忘记包含 jquery 。

这是 jsFiddle 。

这篇关于如何创建淡入加载效果，一个接一个的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！