jQuery while循环不起作用

问题描述

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

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

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

赫雷斯

这是@Evert 的简单实现。

在这里引用他们的答案

在动画之后执行的回调中调用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();
    });
}

演示

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

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

这是该课程的下一个项目

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

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

文档准备好后，调用YourRecusiveFunction() 。

为什么不只使用jQuery each函数呢？

var images = $('.image');

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