Question

我希望这个动画每次都从头开始重复（＃slide1）。

我尝试了setTimeout方法但无法使其工作。由于时间差异和（缺乏知识），我逐行使用。谢谢你的帮助。

$(document).ready(function () {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
});
});
});
});
});
});

<div id="slide1">Slide 1</div>
<div id="slide2">Slide 2</div>
<div id="slide3">Slide 3</div>
<div id="slide4">Slide 4</div>
<div id="slide5">Slide 5</div>
<div id="slide6">Slide 6</div>
<div id="slide7">Slide 7</div>
<div id="slide8">Slide 8</div>
<div id="slide9">Slide 9</div>
<div id="slide10">Slide 10</div>

Answer 1

检查以下JSFiddle ...

$(document).ready(function () {

    (function animate() {
        $("#slide1").fadeIn(2000, function () {
            $("#slide1").delay(4000).fadeOut(2000);
            $("#slide2").delay(6000).fadeIn(1000, function () {
                $("#slide3").fadeIn(1000, function () {
                    $("#slide4").fadeIn(1000, function () {
                        $("#slide5").fadeIn(1000, function () {
                            $("#slide6").fadeIn(1000, function () {
                                $("#slide7").fadeIn(1000, function () {
                                    $("#slide8").fadeIn(1000, function () {
                                        $("#slide9").fadeIn(1000, function () {
                                            $("div").delay(2000).fadeOut(1000, animate); // Call animate again
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });

    }()); // Call the animate function
});

我将代码包装在Animate函数中，该函数在最后一步之后再次调用。

PS。是的，你忘记在JSFiddle中启用JQuery，但我认为这不是你的问题或与你的问题有关。

Answer 2

将主动画逻辑包裹在一个函数中（您已经完成）。像这样：

function Animate() {
   //your animation logic
}

然后定期调用相同的函数。像这样：

setInterval(function(){
   Animate()
}, 1000);

但是，你肯定需要改进你的主要逻辑和结构。

Answer 3

试试这个

JS CODE

$(document).ready(function () {
    setInterval(intervalTest, 1000);
});

function intervalTest() {
    $("#slide1").fadeIn(2000, function () {
        $("#slide1").delay(4000).fadeOut(2000);
        $("#slide2").delay(6000).fadeIn(1000, function () {
            $("#slide3").fadeIn(1000, function () {
                $("#slide4").fadeIn(1000, function () {
                    $("#slide5").fadeIn(1000, function () {
                        $("#slide6").fadeIn(1000, function () {
                            $("#slide7").fadeIn(1000, function () {
                                $("#slide8").fadeIn(1000, function () {
                                    $("#slide9").fadeIn(1000, function () {
                                        $("div").delay(2000).fadeOut(1000, function () {});
                                    });
                                });
                            });
                        });

Answer 4

如果你想要一种排队动画的好方法，你可以创建一个包含带指令的对象的动画队列数组，如下所示：

var animationQueueArr = [
    {
        selector: '#slide1',
        delay: 4000,
        animation: 'fadeIn',
        duration: 2000,
        callback: true
    },
    {
        selector: '#slide1',
        animation: 'fadeOut',
        duration: 2000,
        callback: false
    },
    {
        selector: '#slide2',
        delay: 6000,
        animation: 'fadeIn',
        duration: 2000,
        callback: true
    }
    // and so on
];

然后，你可以循环它们：

function animate (i, skipDelayBool) {
    skipDelayBool = skipDelayBool || false;
    var animationObj = animationQueueArr[i];
    if (animationObj.delay && false === skipDelayBool) {
        return setTimeout(function () {
            animate(i, true);
        }, animationObj.delay);
    }
    if (false === animationObj.callback) {
        $(animationObj.selector)[animationObj.animation](animationObj.duration);
        i += 1;
        i %= animationQueueArr.length;  // reset back to 0 if necessary to start new loop
        animate(i);
    } else {
        $(animationObj.selector)[animationObj.animation](animationObj.duration,
        function () {
            i += 1;
            i %= animationQueueArr.length;
            animate(i);
        );
    }
}


animate(0);

注意我还没有对此进行过测试，但它会让你走上正确的道路，远离最糟糕的缩进噩梦。

Answer 5

我已经回答过一次这个问题。重复：jQuery looping command
看看问题的编辑，你会看到我现在已经回答了两次。

$(document).ready(function me() {
    $("#slide1").fadeIn(100).delay(100).fadeOut(100, function () {
        (function startFade(slide, step) {
            if ((slide === 1) && (step === -1)) {
                setTimeout(me, 100);
            } else if (slide < 10) {
                $("#slide" + slide)[step === 1 ? "fadeIn" : "fadeOut"](100, function () {
                    startFade(slide + step, step);
                });
            } else {
                startFade(slide - step, -step);
            }
        }(2, 1));
    });
});

jQuery从一开始就循环动画

5 个答案: