统一运行jQuery动画
统一运行jQuery动画
提问于 2011-11-28 18:53:09
我正在制作一个jQuery滑动菜单，它可以在悬停时激活。
看起来很棒，但我不得不在两个div元素上并排运行动画。
它似乎是如何使用下面的脚本设想它，但在IE7它没有，所以我想脚本可以更好。
我运行动画时所使用的div元素是彼此紧密对抗的，两者之间没有差距。
所以我想，通过使用下面的脚本，瞄准彼此相邻的两个div。#sidebar-inner和#latest-tweet，将自动保留第一个函数，但当我从#侧栏-内部div转到#最新-tweet div时，它在IE中运行第二个函数，然后运行第一个函数。
$('#sidebar-inner,#latest-tweet').hover(function() {
$("#wrapper").animate({ left: "-178px" }, 300);
$("#sidebar-slider").animate({ width: "512px" }, 300);
$("#latest-tweet").animate({ width: "512px" }, 300);
}, function() {
$("#wrapper").animate({ left: "0" }, 300);
$("#sidebar-slider").animate({ width: "334px" }, 300);
$("#latest-tweet").animate({ width: "334px" }, 300);
});我怎样才能改变脚本，最终这些脚本将完全一致地运行。
还是不可能？
任何帮助都将不胜感激。
请参阅基于问题的简化JSFIDDLE以帮助感谢
http://jsfiddle.net/motocomdigital/9zeYc/
回答 1
Stack Overflow用户
回答已采纳
发布于 2011-11-28 18:58:21
问题是你的动画在排队。也就是说，它们是相互增加的。将stop()添加到动画中。这将阻止它们在再次盘旋时继续运行：
$('#sidebar-inner, #latest-tweet').hover(function() {
$("#sidebar-inner").stop().animate({ right: "0" }, 300);
$("#latest-tweet").stop().animate({ right: "0" }, 300);
}, function() {
$("#sidebar-inner").stop().animate({ right: "-250px" }, 300);
$("#latest-tweet").stop().animate({ right: "-250px" }, 300);
});http://jsfiddle.net/Zc7LL/
您还可以防止动画像这样排队：
$("#sidebar-inner").animate({ right: "0" }, { duration: 300, queue: false });然而，这似乎不像停止动画那么顺利。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8300772
复制相关文章
相似问题
腾讯云开发者
