jQuery从一开始就循环播放动画 [英] jQuery looping animation from the beginning

问题描述

我希望这个动画每次都从头开始重复(#slide1).

I would like this animation to repeat from the very beginning each time (#slide1).

我尝试了setTimeout方法，但无法使其正常工作. 由于时序差异和(缺乏知识)，我逐行使用一个简单的方法. 感谢您的帮助.

I tried the setTimeout method but could not get it to work. I am using a simple line by line since the timing difference and (lack of knowledge). Thanks for your help.

http://jsfiddle.net/q9EZg/6/

$(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>

推荐答案

检查以下 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函数中，在最后一步之后再次调用该函数.

I wrapped your code in a Animate function that is called again after the last step.

PS.是的，您忘记了在JSFiddle中启用JQuery，但是我认为这不是您的问题，也不与您的问题有关.

PS. And yes you forget to enable JQuery in JSFiddle, but I assume that is not your question or related to your question.

这篇关于jQuery从一开始就循环播放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！