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

您可以使用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 4

您应该将代码放入函数中，然后在完成后调用此函数。

$(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();
            });
        });
    }
});

这是演示on the jsfiddle

Answer 5

试试这个：

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();

});

如何让jquery脚本重启？

5 个答案: