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

前端之家收集整理的这篇文章主要介绍了如何在jquery中同时为两件事制作动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当鼠标悬停某些东西时,我想同时动画两件事.

例如,当鼠标悬停id =“trigger”的div时,我想更改Box1的背景颜色,id =“Box1”,Box2的位置,id =“Box2”.

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

解决方法

你可以连续运行它们,如下所示:
$("#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()只是为了防止动画队列建立.要为颜色设置动画,您还需要包含the color pluginjQuery UI.

jquery,.animate(),are implemented中的动画使用setInterval()和13ms计时器,因此它们将在正常流程之外发生…像上面那样做它们不等待第一次完成,它们将同时运行.

猜你在找的jQuery相关文章