爲什麼這個jquery動畫效果不能像我想要的那樣工作？

Question

我想要一個錨點的懸停效果，當我將鼠標懸停在鏈接上時，懸停的人可以從頂部滾動，然後鼠標懸停，可以從底部滾動一次。因此，這裏是我的HTML代碼：

<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

爲什麼會發生這種情況？我如何解決這個問題並達到我的目標？非常感謝！

Answer 1

嘗試使用.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

Answer 2

到目前爲止，我已經找到了這種problemms的

最好的解決辦法是：jQuery Hover Intent

見這裏工作示例：http://jsfiddle.net/x6aVc/2/