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()，并且只需setTimeout即可计算500*(i+1)延迟。离开我们：

$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);
});

使用jQuery使一组图像按顺序显示

3 个答案: