Question

我正在使用Jquery动画，在几次动作中将鼠标悬停在“按钮”上然后返回。我试图使用停止功能来防止图像在光标在按钮上来回移动时上下跳动。我似乎无法使停止功能正常工作。当我把停止放在动画之前（我把它放在第一个.animate之前，所有这些都在最后一个之前无效）图像根本不会弹出或者出现错误。我不确定我做错了什么。

 $(document).ready(function(){
 $("#bearup").hover(function(){
 $("#shopbears").animate({top:['-=120px','swing']},2000).animate({top:'+=0px'},2000)
 .animate({top:'+=50px'},3200).animate({top:'+=70px'});
 });
 });

我为.animate问题创造了一个小提琴。 http://jsfiddle.net/gerstley/dgWDy。也许有人可以找到一种方法来防止动作堆积起来。

Answer 1

假设您没有光标导致悬停的问题，然后取消悬停，然后在您移动店铺时再次悬停，这可能会解决您的问题：

$(document).ready(function(){
 $("#bearup").hover(function(){
 $("#shopbears")
  .finish()
  .animate({top:['-=120px','swing']},2000)
  .delay(2000)
  .animate({top:'+=50px'},3200)
  .animate({top:'+=70px'});
 });
});

Answer 2

经过一些测试后，我找到了一个似乎始终如一的解决方案。使用finish（）而不是stop（）就是答案，但看起来finish（）在.delay（）（或者至少是delay（）和animate（）一起出现问题）。因此，使用animate（）创建延迟效果最佳。我无法想象很多人会需要这个，但你永远不会知道。

$(document).ready(function(){
$("#button").mouseenter(function(){
$("#image") 
.finish().animate({top:['-=120px','swing']},2000)
.animate({top: '+=0px'},2000)
.animate({top:'+=50px'},3200)
.animate({top:'+=70px'})
;
});
});

无法使JQuery .stop正常工作

2 个答案: