Question

I’m really struggling with a jQuery animation.

Please see jsfiddle where I have posted the question. http://jsfiddle.net/Zc7LL/5/

I basically have 2 separate animations running, and I some how need to combine them so they run in unison and don’t get confused.

See code below which works, but its not running great as the animations seem to run after each other.

    $('#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);       
    });

I’ve created a simplified version in a the jsfiddle so you can get the idea of what is going wrong. It’s like I need to merge these functions both together, but my attempts are not working at all.

Answer 1

You are close, by adding code in each of your .hover() functions to animate each of the elements in the DOM you can get a seamless animation out of your page: 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);        
});