CODEWITHSUNDEEP
jqueryslideshowrestart
user1644062
user1644062

Reputation: 65

How to make a jquery script to restart?

I've made a jQuery script that makes a slide show of two div elements. Here is the code

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

Now my question. How to make this script to restart everytime it is finished?

Upvotes: 2

Views: 2061

Answers (5)

andres descalzo
andres descalzo

Reputation: 14967

try this:

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

});

Upvotes: 0

aspirinemaga
aspirinemaga

Reputation: 3937

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

Upvotes: 0

Anthony Simmon
Anthony Simmon

Reputation: 1607

You can use 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();
});

Upvotes: 0

Jeff
Jeff

Reputation: 309

You could create an infinitely recursed function that calls itself upon completion of the animations.

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

And then call it within document.ready:

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

Upvotes: 1

xdazz
xdazz

Reputation: 160833

Create a function foo, and set it as the callback of the last animation.

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

Upvotes: 2

Related Questions