如何在jquery中同时为两件事制作动画

Question

当鼠标悬停某些东西时,我想同时动画两件事.

例如,当鼠标悬停id ="trigger"的div时,我想更改box1的背景颜色id ="box1"和box2的位置id ="box2".

但我不希望他们在队列中动画,即一个接一个.我希望他们同时开始制作动画并同时完成!

Answer 1

你可以连续运行它们,如下所示:

$("#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
});

这将使用.hover()动画徘徊时的一种方式,并把它们动画回到离开时.这.stop()只是为了防止动画队列的建立.要为颜色设置动画,您还需要颜色插件或jQuery UI.

jQuery的动画,.animate(),实现用setInterval()一个定时器13毫秒,所以他们会发生的正常流动外......做他们喜欢上面并没有等待第一个完成,他们会同时运行.