Two animations run the same time jquery

Both of the other solutions are correct, but please, PLEASE don't make your code a list of if else conditions with a massive inside block. Consider, instead the following solution:

http://jsfiddle.net/NM78r/

$(document).ready(function(){ animateTheBox('block1',0); animateTheBox('block2',2); }); function animateTheBox(block,i) { var animation = {}; var duration = 3000; var easing = 'linear'; var done = function(){ animateTheBox(block, (i+1)%4); }; switch(i){ case 0: animation = {'left' : "-=100px"} break; case 1: animation = {'top' : "-=100px"} break; case 2: animation = {'left' : "+=100px"} break; case 3: animation = {'top' : "+=100px"} break; default: return; //This is so you can't call the function in weird ways, as before. } $('.' + block).animate(animation, duration, easing, done); } 

Use a switch statement to determine what kind of animation to do, then only write the actual animation call once. This kind of abstraction is easier to read, and has the added benefit of being way more maintainable. You can be sure that your animation will be done the same way every single time.

EDIT:

Though the above design pattern is probably better in the long run, you could easily do this with an array instead:

$(document).ready(function(){ animateTheBox('block1',0); animateTheBox('block2',2); }); function animateTheBox(block,i) { var animations = [ {'left' : "-=100px"} , {'top' : "-=100px"} , {'left' : "+=100px"} , {'top' : "+=100px"} ]; var duration = 3000; var easing = 'linear'; var done = function(){ animateTheBox(block, (i+1)%4); }; if ( i < 0 || i >= animations.length) return; //Don't deal with out of bound numbers. $('.' + block).animate(animations[i], duration, easing, done); } 

http://jsfiddle.net/4S6Mg/1/

And actually, this could make multi step animation abstraction really easy:

$(document).ready(function(){ var block1Steps = [ {'left' : "-=100px"} , {'top' : "-=100px"} , {'left' : "+=100px"} , {'top' : "+=100px"} ]; var block2Steps = [ {'left' : "+=100px"} , {'top' : "+=100px"} , {'left' : "-=100px"} , {'top' : "-=100px"} ]; multiAnimate($('.block1'), block1Steps, 3000, 'linear', true); multiAnimate($('.block2'), block2Steps, 3000, 'linear', true); }); function multiAnimate(item, animations, duration, easing, infinite){ var i = -1; var step = function(){ i++; if (infinite) i %= animations.length; if (i >= animations.length) return; item.animate(animations[i], duration, easing, step); }; step(); } 

http://jsfiddle.net/jp2K4/

Then, if you wanted to get REALLY Apeshit, you could give each animation its own duration and easing, and BAM! You've basically created for yourself a little arbitrary multistep animation library.

function multiAnimate(item, animations, duration, easing, infinite){ var defaultDuration = 1000; var defaultEasing = 'linear'; var i = -1; var step = function(){ i++; if (infinite) i %= animations.length; if (i >= animations.length) return; item.animate(animations[i].animation , (animations[i].duration)? animations[i].duration: defaultDuration , (animations[i].easing)? animations[i].easing: defaultEasing , step ); }; step(); } $(document).ready(function(){ var block1Steps = [ { animation: {'left' : "-=100px"} , duration: 3000 , easing: 'linear' } , { animation: {'top' : "-=100px"} , duration: 1000 , easing: 'swing' } , { animation: {'left' : "+=100px"} , duration: 5000 , easing: 'swing' } , { animation: {'top' : "+=100px"} , duration: 2000 , easing: 'linear' } ]; var block2Steps = [ { animation: {'left' : "+=100px"} , duration: 5000 , easing: 'swing' } , { animation: {'top' : "+=100px"} , duration: 2000 , easing: 'linear' } , { animation: {'left' : "-=100px"} , duration: 3000 , easing: 'linear' } , { animation: {'top' : "-=100px"} , duration: 1000 , easing: 'swing' } ]; multiAnimate($('.block1'), block1Steps, 3000, 'linear', true); multiAnimate($('.block2'), block2Steps, 3000, 'linear', true); }); 

http://jsfiddle.net/nnQU8/