jQuery雙動畫結合

Question

我真的很努力與jQuery動畫。

請參閱jsfiddle我已發佈該問題。 http://jsfiddle.net/Zc7LL/5/

我基本上有2個獨立的動畫運行，並且我需要將它們組合起來，以便它們一致運行並且不會感到困惑。

請參閱下面的代碼，但它的運行效果並不好，因爲動畫似乎會相互依次運行。

$('#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一個簡化版本，所以你可以得到什麼錯誤的想法。這就像我需要將這些功能合併在一起，但我的嘗試根本沒有工作。

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);   
});