Question

我尝试循环一些div，我有那个代码：

var first = ".first";
for (i = 0; i < 9999; i++) {
    setTimeout(function () {
        $(first).delay(500).animate({
            "opacity": "1"
        }, 1500);
        $(first).delay(1500).animate({
            "opacity": "0"
        }, 1500);
        $(".1").delay(4500).animate({
            "opacity": "1"
        }, 1500);
        $(".1").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".2").delay(4800).animate({
            "opacity": "1"
        }, 1500);
        $(".2").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".3").delay(5300).animate({
            "opacity": "1"
        }, 1500);
        $(".3").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".4").delay(5600).animate({
            "opacity": "1"
        }, 1500);
        $(".4").delay(1500).animate({
            "opacity": "0"
        }, 1500);

        $(".5").delay(5900).animate({
            "opacity": "1"
        }, 1500);
        $(".5").delay(1500).animate({
            "opacity": "0"
        }, 1500);
    }, 6000);
}

我试过没有setTimeout，效果是一样的 - divs出现了，只在第一个循环中消失了。在每个下一个循环中，它们以随机顺序出现。我知道，这种方法是错误的，但我对JavaScript很绿，我不知道怎么做正确。有人可以帮帮我吗？

Answer 1

这是因为for循环保持附加事件，并且您对同一元素的9999动画没有延迟。他们只是互相冲击。代码毫无意义。

如果希望代码在循环中运行，可以在其中一个动画中使用回调，并在完成后调用函数。其他选择是使用间隔，但是时间事件不准确并且它们可能堆积起来会变得混乱。

Answer 2

似乎你试图通过多次运行setTimeout计时器来使元素看起来无限期地生成动画。为此，您应该使用setInterval()让函数每6秒运行一次。

所以，而不是......

for (i = 0; i < 9999; i++) {
    setTimeout(function () {
        $(first).delay(500).animate({
            "opacity": "1"
        }, 1500);

        // etc etc

    }, 6000);
}

......这样做：

setInterval(function () {
    $(first).delay(500).animate({
        "opacity": "1"
    }, 1500);

    // etc etc

}, 6000);

（注意：没有for循环。）

演示：http://jsfiddle.net/57sYA/

Answer 3

我找到了问题的解决方案 - setInterval

    var licznik=0;
function show_anim(){
         if(licznik!=9999){
         $("#first").delay(500).animate({"opacity": "1"}, 1500);
         $("#first").delay(1500).animate({"opacity": "0"}, 1500);
         $("#1").delay(4500).animate({"opacity": "1"}, 1500);
         $("#1").delay(1500).animate({"opacity": "0"}, 1500);

         $("#2").delay(4800).animate({"opacity": "1"}, 1500);
         $("#2").delay(1500).animate({"opacity": "0"}, 1500);

         $("#3").delay(5300).animate({"opacity": "1"}, 1500);
         $("#3").delay(1500).animate({"opacity": "0"}, 1500);

         $("#4").delay(5600).animate({"opacity": "1"}, 1500);
         $("#4").delay(1500).animate({"opacity": "0"}, 1500);

         $("#5").delay(5900).animate({"opacity": "1"}, 1500);
         $("#5").delay(1500).animate({"opacity": "0"}, 1500);
         licznik++;
         console.log(licznik);
         }
   }

$(document).ready(function(){

show_anim()


setInterval("show_anim()",12000);
});

演示：http://jsfiddle.net/D5bxA/

Javascript setTimeout +循环

3 个答案: