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