jQuery双动画组合

我真的很挣扎jQuery动画。

请参阅我发布问题的jsfiddle 。 http://jsfiddle.net/Zc7LL/5/

我基本上有两个单独的动画运行，我有些需要将它们组合起来，以便它们齐声运行并且不会混淆。

请参阅下面的代码，但它运行得不好，因为动画似乎相继运行。

$('#sidebar-inner, #latest-tweet').hover(function() { $("#wrapper").stop().animate({ left: "-178px" }, 300); $("#sidebar-slider").stop().animate({ width: "512px" }, 300); $("#latest-tweet").stop().animate({ width: "512px" }, 300); }, function() { $("#wrapper").stop().animate({ left: "0" }, 300); $("#sidebar-slider").stop().animate({ width: "334px" }, 300); $("#latest-tweet").stop().animate({ width: "334px" }, 300); }); $('#latest-tweet').hover(function() { $('#latest-tweet').animate({ top: "-163px" }, 300); }, function() { $('#latest-tweet').animate({ top: "-1px" }, 300); }); 

我在jsfiddle中创建了一个简化版本，这样你就可以了解出了什么问题。 这就像我需要将这些function合并在一起，但我的尝试根本不起作用。

Answer 1

您很接近，通过在每个.hover()函数中添加代码来为DOM中的每个元素设置动画，您可以从页面中获得无缝动画： http ： //jsfiddle.net/jasper/Zc7LL/9/

 var $sidebarInner = $('#sidebar-inner'), $latestTweet = $("#latest-tweet"); $sidebarInner.hover(function() { $sidebarInner.stop().animate({ right: "0" }, 300); $latestTweet.stop().animate({ top : "-1px", right : "0"}, 300); }, function() { $sidebarInner.stop().animate({ right : "-250px" }, 300); $latestTweet.stop().animate({ top : "-1px", right : "-250px"}, 300); }); $latestTweet.hover(function() { $sidebarInner.stop().animate({ right : "0" }, 300); $latestTweet.stop().animate({ top : "-163px", right : "0" }, 300); }, function() { $sidebarInner.stop().animate({ right : "-250px" }, 300); $latestTweet.stop().animate({ top : "-1px", right : "-250px" }, 300); });