使用jQuery使一組圖像按順序顯示

Question

我有一個頁面顯示一堆縮略圖（大約30），並且客戶希望它們逐一出現，按順序從左到右依次這一頁。這是我試過的：

var start_opacity = 500; 
$j('.grid-photo').each(function(i) { 
    start_opacity = start_opacity + 500;    

    setTimeout(function() { 
     $j(i).animate({opacity: 1}, 4000); 
    }, start_opacity); 
}); 

它似乎並不知道我在引用什麼。有什麼想法嗎？

Answer 1

.each()函數傳遞index和element作爲函數的參數。它還呼籲該元素的上下文中的函數（this點使你的元素）

您可以保存一個快速變化var $photo = $j(this);您.each()內，也可以通過只是走500*(i+1)計算你setTimeout延遲。留給我們：

$j('.grid-photo').each(function(i) { 
    var $photo = $j(this); 
    setTimeout(function() { 
     $photo.animate({opacity: 1}, 4000); 
    }, 500*(i+1)); 
}); 

Answer 2

Here是一個jQuery插件，你可以用它來達到你的目的：

Answer 3

看起來像一個範圍問題。

嘗試：

$j('.grid-photo').each(function(i) { 
    start_opacity = start_opacity + 500;    
    var thisImg = $(this); 
    setTimeout(function() { 
     thisImg.animate({opacity: 1}, 4000); 
    }, start_opacity); 
});