动画未正确排队

Question

如果您将鼠标悬停在标题上，我有这个工作代码可以前后移动标题图标

jQuery('h1.heading').hover(
  function(){ 
    $icon = jQuery('.heading-icon', this);    
    if( ! $icon.is(':animated') ){
        $icon.animate({ "margin-left" : "+=7px" }, 200, function(){
          $icon.animate({ "margin-left" : "-=7px" }, 400, function(){ 
             $icon.css('margin-left','auto'); 
          } );
        } );
    }      
  },
  function(){} 
);

但是，如果您将鼠标悬停在标题上的速度更快（比动画完成的速度更快），它会出现错误并最终从原始位置移开。

我使用 onComplete 函数，我什至尝试使用! $('...').is(':animated')，如您在上面看到的，没有帮助，所以我想至少我会在动画结束后重置位置，这样即使它会出现错误，它也会在在所有动画结束后至少重置到原始位置......这只是部分工作并且仍然会出现错误并最终处于错误的位置......

那怎么了？

为什么会这样？ jQuery UI enques 的抖动效果好吗？

注意：我不在乎动画是否运行了几次，目标是在（所有）动画结束时使其保持在正确的位置。

有什么帮助吗？ :)

编辑

我终于在 JSFiddle 上重现了这个问题 - http://jsfiddle.net/yhJst/
==> 尝试在标题上更快地上下悬停

编辑2

只有一个标题时似乎不会发生...http://jsfiddle.net/scZcB/3/

Answer 1

这就是问题所在，在您的回调函数中，您在 $icon 变量上使用了动画。但是，当您悬停另一个元素时，该变量会针对新悬停的元素进行更改。

在回调或自然队列中使用$(this)：

自然排队

jQuery('h1.sc_blogger_title').on('mouseenter', function(){ 
    $icon = jQuery('.sc_title_bubble_icon', this);    
    if( ! $icon.is(':animated') ){
        $icon.animate({ "margin-left" : "+=7px" }, 200).animate({ "margin-left" : "-=7px" }, 400);
    }      
});

http://jsfiddle.net/yhJst/1/

$(this)

jQuery('h1.sc_blogger_title').on('mouseenter', function(){ 
    $icon = jQuery('.sc_title_bubble_icon', this);    
    if( ! $icon.is(':animated') ){
        $icon.animate({ "margin-left" : "+=7px" }, 200, function(){
            $(this).animate({ "margin-left" : "-=7px" }, 400);
        });
    }      
});

http://jsfiddle.net/yhJst/2/

---

或者使用局部变量。

正如您所发现的，当前变量是一个全局变量。只需添加关键字var。

jQuery('h1.sc_blogger_title').on('mouseenter', function(){ 
    var $icon = jQuery('.sc_title_bubble_icon', this);    
    if( ! $icon.is(':animated') ){
        $icon.animate({ "margin-left" : "+=7px" }, 200, function(){
            $icon.animate({ "margin-left" : "-=7px" }, 400, function(){ 
                $icon.css('margin-left','auto'); 
            } );
        } );
    }      
});