Question

我有代码：

   jQuery(img).each(function() {
        jQuery(this).animate({opacity: 0});  
        jQuery(this).animate({opacity: 1},4000);
    });

代码将图像不透明度更改为0，然后更改为1.重点是所有图像都会发生这种情况，而我希望它在当时对一个图像起作用。

任何想法如何实现这一目标？

Answer 1

jQuery('img').css('opacity', 0).each(function(i) {
    jQuery(this).animate({opacity: 0}, i * 1000);
    jQuery(this).animate({opacity: 1}, 1000);
});

http://jsfiddle.net/Squeegy/9J54u/4/

这将逐渐淡入一张图像，每4秒钟一次，直到所有图像都淡入。

这是有效的，因为每个都将数组的索引传递给迭代器函数。并且你可以使用该索引作为偏移量在它消失之前的多长时间。

Answer 2

以下是我如何让每张图片一个接一个地淡入淡出的示例。当第一张图像完成淡入时，第二张图像开始，依此类推。

$(img).each(function(i) {
    $(this).css('opacity', 0);
});

doAnim(img, 0);

function doAnim(items, i) {
    if (i > items.length) return;
    $(items[i]).animate({
        opacity: 1
    }, {
        complete: function() {
            doAnim(items, i + 1);
        }
    });
}

Here's a live demo.

Answer 3

好的，这是我的抨击。

var duration = 1000;
$('img').css('opacity', 0).each(function(i)
{
    $(this).delay(i*duration).animate({opacity: 1}, duration);
});

的 Demo demo demo 的

jQuery - “预加载”（setinterval）的效果？

3 个答案: