javascript - 动画未正确排队

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') 正如你在上面看到的那样，没有帮助，所以我想至少我会在动画结束后重置位置，这样即使它会得到 buggy 它至少会在所有动画结束后重置到原始位置......这只是部分工作并且仍然会出现 buggy 并最终出现在错误的位置......

怎么了？

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

注意:我不关心动画是否多运行几次，目标是让它在(所有)动画结束时停留在正确的位置。

有什么帮助吗？ :)

编辑

我终于在 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/

$(这个)

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