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