0

I am using Jquery animate to have an image pop up upon hover over 'button' in a couple motions and then return. I am trying to use the stop function to prevent the image from jumping up and down when the cursor moves back and forth over the button. I can't seem to get the stop function to work properly . When I put the stop before the animate (I have put it before the first .animate, all of them and before the last one to no avail) the image wont pop up at all or else comes up incorrectly. I am not sure what I am doing wrong.

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

I have created a fiddle for the .animate problem. http://jsfiddle.net/gerstley/dgWDy. Perhaps someone can figure out a way to keep the motions from stacking up.

4

2 回答 2

1

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

$(document).ready(function(){
 $("#bearup").hover(function(){
 $("#shopbears")
  .finish()
  .animate({top:['-=120px','swing']},2000)
  .delay(2000)
  .animate({top:'+=50px'},3200)
  .animate({top:'+=70px'});
 });
});
于 2013-07-16T18:19:48.427 回答
0

在对不同的选项进行了一些测试后，我发现了一个似乎始终有效的解决方案。使用 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'})
;
});
});
于 2013-07-24T12:09:43.887 回答