jQuery (as of version 1.4) provides the delay() method to allow web developers to create a certain delay between animations and effects. This method accepts as its sole parameter a time value expressed in milliseconds. Its basic usage is $(element).effect1().delay(time).effect2(). This means that the execution of the second jQuery's effect is delayed by a certain time value defined in the delay() method. In this post I'm going to show you a practical example of how we can make this method work together with JavaScript intervals.
Consider the basic example of the following three-steps animation:
- an element fades out (1 second)
- it pauses (1 second)
- the element fades in (1 second)
The overall duration of the above animation is 3 seconds (3000 milliseconds). Each step lasts 1 second (1000 milliseconds). We also want the animation to enter in an infinite loop. Here's how we can do using delay() and intervals:
$('#run').click(function(e) {
window.setTimeout(function() {
$('#test').fadeOut(1000).delay(1000).fadeIn(1000);
window.setTimeout(arguments.callee, 3000);
}, 25);
e.preventDefault();
});
The second call to setTimeout() creates the infinite loop. Note that in this second call the duration must be equal to the overall duration of the entire animation (3000 milliseconds). You can see a demo below.