jQuery双动画结合 [英] jQuery dual animation combine

问题描述

请参阅 jsfiddle 我发布了这个问题。 http://jsfiddle.net/Zc7LL/5/

我基本上有两个独立的动画正在运行，而我需要将它们组合起来，以便它们一致运行并且不会感到困惑。

查看代码

  $（'＃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 ，这样你就可以知道发生了什么问题。这就像我需要将这些函数合并在一起，但我的尝试根本不起作用。

解决方案

在每个 .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）; 
}）; 
 $ b $ latestTweet.hover（function（）{
 $ sidebarInner.stop（）。animate（{right：0}，300）; 
 $ latestTweet.stop（ ）.animate（{top：-163px，right：0}，300）; 
}，function（）{
 $ sidebarInner.stop（）。animate（{right： - ）; 
 $ latestTweet.stop（）。animate（{top：-1px，right：-250px}，300）; 
}）; 
  

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.

解决方案

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

这篇关于jQuery双动画结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！