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/