联合运行jQuery动画

Question

我正在制作一个jQuery滑动菜单，它在悬停时激活。

看起来很棒，但我必须并排运行两个div元素上的动画。

它似乎正在工作如何使用下面的脚本设想它，但在IE 7中它没有，所以我猜脚本可以更好。

我正在运行动画的div元素彼此紧密对峙，两者之间没有间隙。

所以我想，通过使用下面的脚本，针对两个div它们是彼此相邻.. ＃侧边栏内和＃最新的鸣叫，它会自动停留在第一个功能，但当我从＃sidebar-inner div到＃latest-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/

Answer 1

的问题是，你的动画正在排队。也就是说，他们正在彼此相加。将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 }); 

然而，这似乎并没有像停止动画一样流畅。