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圖像逐個淡入？

回答

相關問題