CODEWITHSUNDEEP
jqueryjquery-animate
WillingLearner
WillingLearner

Reputation: 7316

Animate Divs One Right After the Other with Jquery-pt 2

Please view my previous question here:

Animate Divs One Right After the Other with Jquery

View my second answer....

Can anyone tell me how to write my code correctly so that i can animate more than just 2 divs? Please give me an example of at least 4 divs if you can. Thanks in advance.

Upvotes: 1

Views: 1212

Answers (1)

user113716
user113716

Reputation: 322502

Give them a common class, iterate over them with .each(), and use .delay(), multiplying the current index number of the iteration by the duration.

Example: http://jsfiddle.net/patrick_dw/jPeAp/

html

<div class="animation">Hello!</div>
<div class="animation">Jquery Animate!</div>
<div class="animation">Hello!</div>
<div class="animation">Jquery Animate!</div>

js

$('.animation').each(function( index ) {
    $(this).delay( index * 700 ).fadeIn();
});

This way it will automatically work for any number of elements.

In the loop, index will be 0, 1, 2, etc.. So the delay will be 0, 700, 1400, etc.

EDIT:

If you can't give the elements a common class, then just group the IDs into one multiple selector.

$('#animation1,#animation2,#animation3,#animation4').each(function( index ) {
    $(this).delay( index * 700 ).fadeIn();
});

Upvotes: 3

Related Questions