使用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); 
});