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.e. one after another. 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.