how to animate two things at the same time in jquery

Question

i want to animate 2 things at same time when mouse hovers something.

for example i want to change background color of box1 with id = "box1" and position of box2 with id="box2" when mouse hovers a div with id="trigger".

but i don't want them to animate in a queue, i want them to start animating at same time and finish at same time!

Answer 1

You can just run them in a row, like this:

$("#trigger").hover(function() {
   $("#box1").stop().animate({ backgroundColor: '#000000' });
   $("#box2").stop().animate({ top: "-20px" });
}, function() {
   $("#box1").stop().animate({ backgroundColor: '#FFFFFF' }); //set it back
   $("#box2").stop().animate({ top: "0px" });                 //set it back
});

This uses .hover() to animate one way when hovering, and animate them back when leaving. The .stop() is just to prevent animation queue build-up. To animate a color, you'll need either the color plugin, or jQuery UI included as well.

Animations in jquery, .animate(), are implemented using setInterval() with a 13ms timer, so they'll happen outside the normal flow...doing them like above doesn't wait for the first to finish, they'll run simultaneously.

Answer 2

When the first animation starts, the next line of code executes without waiting for the animation to finish.

So to do two things at once:

$('#trigger').hover(function()
{
    $('#box1').animate({ ... });
    $('#box2').animate({ ... });
});

Answer 3

Check out jQuery.animate() docs. There is queue property:

queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.