jquery - 再起動するjqueryスクリプトを作成するには?

Question

2 つの div 要素のスライド ショーを作成する jQuery スクリプトを作成しました。ここにコードがあります

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

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

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

});