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

jQuery双动画组合

1 个答案: