Question

我想知道如何使用Jquery逐个显示我的图像（sorta淡入）。基本上我有一个图像网格，我希望这些图像在页面加载时逐个显示。

以下是我的代码：

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <div id="images">
                <a href="#"><img src="" alt=""/></a>
                <a href="#"><img src="" alt=""/>
                <a href="#"><img src="" alt=""/></a>
                <a href="#"><img src="" alt=""/></a>
                <a href="#"><img src="" alt=""/></a>
        </div>

        <script type="text/javascript">
            $(document).ready(function() { 
                $('#images').find('a').fadeIn(500);
            });
        </script>

如何使用Jquery实现这一目标？

谢谢！ =]

Answer 1

请尝试以下代码：

$("img").each(function(idx){
    $(this).delay(100*idx).fadeIn(500);
});

每张图像的淡入淡出时间将比前一张图像晚100毫米（100 * idx）。

以下是我测试此技术的一个页面：hexagons apperaring in sequence

Answer 2

有几种方法可以做到这一点discussed here。

以下方法使用"complete" callback添加新事件 - 下一个淡入淡出将不会启动，直到当前的事件结束，无论多长时间。这种方法的一个优点（和缺点）是推迟创建/排队后续动画。

var $elms = $('#images').find('a');
$elms.fadeOut(0);

var elms = $.makeArray($elms); // a real array for .shift
function fadeNext () {
   // get next element
   var e = elms.shift();
   if (e) {
      // queue animation, rinse and repeat when it's complete
      $(e).fadeIn(500, fadeNext);
   }
}
fadeNext();

（以及corresponding jsfiddle。）

Jquery图像逐一淡出？

2 个答案: