CODEWITHSUNDEEP
jqueryloopsanimationonload
Zack Chan
Zack Chan

Reputation: 11

i need this to start on page load and loop infinitely

I need this to start on page load and loop infinitely. Here's what I have so far.

$(document).ready(function slideshow(){
    $('#slide1').show(500).delay(500).animate({width:'240px'}).delay(500).animate({height:'50px', width:'410px'}).delay(1500).hide(500);
    $('#slide2').delay(4000).show(500).delay(500).animate({width:'150px'});
});

Upvotes: 0

Views: 546

Answers (2)

Geert-Jan
Geert-Jan

Reputation: 18925

@PSR's answer helps if you're always sure you want to repeat each 5 seconds.

Another way would be to write what's called a recursive function: a function that calls itself. This allows you to start a new animation the moment all current animations are done.

$(document).ready(function slideshow(){
    var animationsToComplete = 2,
    animationsCompleted =0;

    //in your specific example you could omit this and only have a callback on the animation
    //that takes the longest time, but to be a bit more generic, you could use the folowing
    //which tests if all animations are completed and if so, immediately starts a new one.
    var conditionalRecursiveCall = function(){
      if(++animationsCompleted % animationsToComplete == 0){
         recFn();
      }
    }

    var recFn = function(){
      $('#slide1').show(500).delay(500).animate({width:'240px'}).delay(500).animate({height:'50px', width:'410px'}).delay(1500).hide(500, conditionalRecursiveCall)
      $('#slide2').delay(4000).show(500).delay(500).animate({width:'150px'}, 400, 'swing',conditionalRecursiveCall);
    }  

    recFn();
});

Upvotes: 0

PSR
PSR

Reputation: 40348

use setInterval()` to call repeatedly

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds)

$(document).ready(function(){
var refreshId = setInterval(function(){
     //your code here
}, 5000);
});

This will repeat for every 5 seconds

Upvotes: 2

Related Questions