聯合運行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 }); 

然而，這似乎並沒有像停止動畫一樣流暢。