Multiple jquery animations

Question

I have 3 divs on my page that I am trying to give an extension look using the jquery.animate width function. The fact is that I do not want all of them to expand at the same time, but I also do not want them to start only when they are over. Do I need them to start a few milliseconds after the previous time started, so that it is a little out of sync, if that makes sense?

Answer 1

DEMO link

$('.box').each(function(i){ // 'i' = index var spd = 700; // set speed (animation/delay) time var dly = spd*i; // 700*0 = 0 ; 700*1 = 700 ..... $(this).delay(dly).animate({width: 500 },spd); // now you have proper delays. }); 

---

EDIT:

Demo

 $('.box').each(function(i){ var dly = 400*i; // delay time is less than... $(this).delay(dly).animate({width: 200},800); // the animation time }); 

And all in a few lines.

It is unbelievable that the above was “-1” after Q to change 1h after my first answer.
Never mind. A few lines here is your script.
By the way, the above was so nicely explained that someone can fix it in seconds to get the best results. The approach was key. Thank you !;)

Answer 2

Try using .delay() to animate() :

$('#mydiv').delay(200).animate

Example: http://jsfiddle.net/yF8Vx/

Answer 3

You can specify that the queue is not in the animation of one of the following options:

 $('div').animate({"width": 100}); 

You can then run this code in separate calls to window.setTimeout to break the effect.

Example - http://jsfiddle.net/6Dqus/1/

Answer 4

You can delay them with a simple timer:

 // Start animation 1 setTimeout(function { // Start animation 2 }, 100); setTimeout(function { // Start animation 3 }, 200); 

Answer 5

Use each() width delay() :

 $("divs").each(function(index){ $("this").delay(index*200).animate({"width":100},500) }) 

After starting the previous animation, the next animation of 200 m will begin.

Missing argument fixed.