jquery - 如何使 jquery 脚本重新启动？

Question

我制作了一个 jQuery 脚本，它可以制作两个 div 元素的幻灯片。这是代码

$(document).ready(function(){
    $("div#slide2").hide();
    $("div#slide1").show().delay(5000).fadeOut(1500,function(){
    $("div#slide2").fadeIn(1500).show().delay(5000).fadeOut(1500)
    });
});

现在我的问题。如何让这个脚本在每次完成时重新启动？

Answer 1

创建一个函数foo，并将其设置为最后一个动画的回调。

$(document).ready(function(){
    $("div#slide2").hide();
    (function foo() {
        $("div#slide1").show().delay(5000).fadeOut(1500,function(){
            $("div#slide2").fadeIn(1500).show().delay(5000).fadeOut(1500, foo);
        });
    }());
});

Answer 2

您可以创建一个无限递归函数，该函数在动画完成时调用自身。

function animation() {
    $("div#slide2").hide();
    $("div#slide1").show().delay(5000).fadeOut(1500,function(){
        $("div#slide2").fadeIn(1500).show().delay(5000).fadeOut(1500, function() {
            animation();
        });
    });
}

然后在 document.ready 中调用它：

$(document).ready(function() { animation(); });

Answer 3

尝试这个：

var repeat = function(time) {

   var 
       refForStop = true,
       fnrepeat = function() {
          $("div#slide2").hide();
          $("div#slide1").show().delay(5000).fadeOut(1500,function(){
             $("div#slide2").fadeIn(1500).show().delay(5000).fadeOut(1500)
          });

          if (refForStop) {
             setTimeout(fnrepeat, time || 1000);
          }
       };

   fnrepeat();
   return function() { refForStop = false; };
};


$(document).ready(function(){

    var fnStop = repeat();
    //run function for stop: fnStop();

});

Answer 4

您可以使用setTimeout：

function foo()
{
    $("div#slide2").hide();
    $("div#slide1").show().delay(5000).fadeOut(1500,function()
    {
        $("div#slide2").fadeIn(1500).show().delay(5000).fadeOut(1500);
    });

    setTimeout(foo, 0);
}

$(document).ready(function()
{
    foo();
});

Answer 5

You should put your code into the function, then call this function after it's completed.

$(document).ready(function(){

    slideshow();


    function slideshow(){
        $("div#slide2").hide();
        $("div#slide1").show().delay(5000).fadeOut(1500,function(){
            $("div#slide2").fadeIn(1500).show().delay(5000).fadeOut(1500,function(){
                slideshow();
            });
        });
    }
});

here is the demo on the jsfiddle