jQuery.animate懸停後不工作

Question

我正在嘗試爲我的網站製作菜單。我想要實現菜單項分別在盤旋或關閉時右轉和後轉。但是什麼都沒有發生。 這是我的代碼：

$(document).ready(function(){ 
     $(".item").hover(function(){ 
      $(this).animate({ 
       right: "-=100px"; 
       }, "slow"; 
      ); 
      , $(this).animate({ 
       right: "+=100px"; 
       }, "slow"; 
      ); 
     }); 
    }); 

Answer 1

首先，您的語法不正確。

您可能還想用on("mouseover")而不是hover()，因爲我相信你不想在mouseout上開始動畫。如果您使用hover，會發生這種情況。

另一件事是你不想運行動畫，如果它目前正在運行。這會導致一些意想不到的行爲。

下面的代碼與正確的語法與mouseover：

$(document).ready(function() { 

    $(".item").on("mouseover", function() { 

     // run the animation only if the item is NOT animating 
     if (!$(this).is(':animated')) { 

      $(this).animate({ 
       right: "-=100px" 
      }, "slow", function() { 
       // first animation completed 
       $(this).animate({ 
        right: "+=100px" 
       }, "slow"); 
      }); 

     } 

    }); 

}); 

我做了一個演示：http://jsfiddle.net/131o4hb0/4/