In parallel or as a sequence?
If you want to animate all divs at the same time then you can write:
- $('.myDivs').hide().fadeIn(1000).not(':last').delay(5000).fadeOut(1000);
But if you want to concatenate the animations then you can choose between a long and a short version.
The long version uses the callback method of the fadeOut() method:
- var stopIndex = $('.myDivs').hide().length-1;
- function fadeMyDiv(nr) {
- if (nr == stopIndex) {
- $('.myDivs:last').fadeIn(1000);
- } else {
- $('.myDivs').eq(nr).fadeIn(1000).delay(5000).fadeOut(1000, function(){
- fadeMyDiv(nr+1);
- });
- }
- }
- fadeMyDiv(0);
The new
short version uses the plugin
jquery-timing and consists of only:
- var divs = $('.myDivs').hide();
- divs.each($).fadeIn(1000).not(divs.last()).delay(5000).fadeOut(1000,$);
The call to .each($) will create a sequential loop iterating over all divs, one by one. The usage of fadeOut($) makes the method chain wait until the animation ended before going on. Thus the loop waits with each iteration until the element faded out.
Have fun!
- creativecouple