jquery - 使用边距的 JQuery 动画

Question

我所拥有的正在工作，但我想看看是否有更好的方法来编写代码，而且我在 mouseleave 上也遇到了延迟。实际动画以所需的速度发生，但在我的鼠标离开后，它似乎需要大约 2-3 秒才能执行任何操作。

CSS 最初设置为 margin-left:-64px

$('.homeButton').mouseover(function(){
  $('.homeButton').animate({marginLeft:'0px'},'slow');  
});

$('.homeButton').mouseleave(function(){
   $('.homeButton').animate({marginLeft:'-64px'},200);  
});

Answer 1

你可以使用stop和hover方法。

停止匹配元素上当前正在运行的动画。

$('.homeButton').hover(function(){
     $(this).stop(true, true).animate({marginLeft:'0px'},'slow');  
}, function(){
     $(this).stop(true, true).animate({marginLeft:'64px'},'slow');  
})