动画没有正确排队

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')，如上所示，没有帮助，所以我想至少我会在动画结束后重置位置，所以即使它会变成bug所有动画结束后，至少会重置到原来的位置......这只能部分工作，但仍然会出现问题并最终处于错误的位置......

那么什么错？

怎么来的，例如来自jQuery UI的震动效果好不好？

注意：我不关心动画是否运行了几次，目标是让（动画）动画结束时它保持在正确的位置。

有任何帮助吗？ :)

修改

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

EDIT2

当只有一个标题时，似乎没有发生...... 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'); 
            } );
        } );
    }      
});