jquery图像逐个淡入？

我想知道如何使用jquery使我的图像一个接一个出现（sorta淡入）。基本上我有一个网格图像，我希望那些在页面加载时一个接一个地出现。jquery图像逐个淡入？

这里是我下面的代码：

 <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？

谢谢！ =]

来源

2014-02-11 user3295471

尝试以下代码：

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

每个图像的淡入稍后将比先前启动100毫秒（100 * IDX）。

这里是我测试这个技术我的网页之一：hexagons apperaring in sequence

来源

2014-02-11 03:32:30

有几个方法可以做到这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。）

来源

2014-02-11 03:33:10 user2864740

jquery图像逐个淡入？

回答

相关问题