为什么这个jquery动画效果不能像我想要的那样工作？

我想要一个锚点的悬停效果，当我将鼠标悬停在链接上时，悬停的人可以从顶部滚动，然后鼠标悬停，可以从底部滚动一次。因此，这里是我的HTML代码：为什么这个jquery动画效果不能像我想要的那样工作？

<div class="viewport"> 
     <div class="container"> 
      <a class="scroll hovered" href="#">Hover Now</a> 
      <a class="scroll nhover" href="#">Not Hover</a> 
     </div> 
    </div>

这里是我的jQuery代码：

 $(".container").hover(function() { 
      $(this).animate({ 
       top: '+=22' 
      }, 800, 'easeInOutBack'); 
     }, function() { 
      $(this).animate({ 
       top: '-=22' 
      }, 800, 'easeInOutBack'); 
     });

Then the final result is here

，但这里有一个问题，当我下一个链接上的快速捷运鼠标，前一个还在滚动，我想避免这种情况发生，我想想停止f油膏，所以我说“.stop（）”之前“.animate”，像这样：

 $(".container").hover(function() { 
      $(this).stop().animate({ 
       top: '+=22' 
      }, 800, 'easeInOutBack'); 
     }, function() { 
      $(this).stop().animate({ 
       top: '-=22' 
      }, 800, 'easeInOutBack'); 
     });

但是我想要的结果不工作，当我动作快的链接，他们消失了，look at here

为什么会发生这种情况？我如何解决这个问题并达到我的目标？非常感谢！

来源

2011-03-14 hh54188

问题是，如果你tr徘徊悬停太快，该div不是在顶部+ 22，所以下一个动画移动它比之前更高。 3nigma的答案解决了这个问题（第一个是clearQueue，下一个是jumpToEnd强制父动画的CSS更改） – 2011-03-14 06:53:07

尝试使用.stop(true,true)它可以帮助

 $(".container").hover(function() { 
      $(this).stop(true,true).animate({ 
       top: '+=22' 
      }, 800, 'easeInOutBack'); 
     }, function() { 
      $(this).stop(true,true).animate({ 
       top: '-=22' 
      }, 800, 'easeInOutBack'); 
     });

这里是更新fiddle

来源

2011-03-14 06:49:59 Rafay