Question

我只是想弄清楚如何使用相同的类循环遍历元素并一次为它们设置一个动画。我认为这个循环可以工作，但我不明白为什么它不会。

$(document).ready(function() {
    var index = 0;
    var images = $('.image');

    while (index < images.length) {
        var image = images[index];
        image.animate({
            opacity: "1"
        }, 1000, function() {
            index++;
        });
    };
});

继承人Fiddle

Answer 1

在动画之后执行的回调中调用

index++。 此脚本停止执行后，动画才会启动。

因此，index++永远不会被执行，循环永远不会结束。

您需要将其重写为递归函数。现在调用index++的事件处理程序实际上需要负责设置下一个动画。

Answer 2

这是@Evert brilliantly explains in another answer的简单实现。

在此引用他们的答案

在动画之后执行的回调中调用index ++。   只有在此脚本停止后才会启动动画   执行。

因此，index ++永远不会被执行，循环永远不会结束。

您需要将其重写为递归函数。事件处理程序   现在调用index ++实际上需要负责设置   下一个动画。

实施可以是这样的

var index = 0;
var images = $('.image');
animate(images);

function animate() {
    var image = images.eq(index);
    image.animate({
        opacity: "1"
    }, 1000, function () {
        index++;
        animate();
    });
}

演示 https://jsfiddle.net/dhirajbodicherla/w4cgctyk/2/

Answer 3

还有一个jQuery .each函数，使用如下：

$('.class').each(function() {
 $(this).animate(); 
});

这是该类的下一个项目

Answer 4

index++;你的逻辑出错了你应该有一个递归函数。您需要在递归函数中增加index的值。

function YourRecusiveFunction() {
    var image = images.eq(index);
    image.animate({
        opacity: '1'
    }, 1000, function () {
        index++;
        YourRecusiveFunction();
    });
}

文档准备好后，请致电YourRecusiveFunction()。

Answer 5

为什么不使用jQuery each函数？

var images = $('.image');

$.each(images,function(){
    $(this).animate({
        opacity:"1"
    }, 1000, function(){
        index++;
    });
 });

jQuery while循环不工作

5 个答案: