On Hover动画多次调用

Question

我使用下面的代码来动画图像

$('body').prepend('<div id="Checker"></div>');

$('#Checker').hover(
 function() { $(this).animate({  height: '+=20' });}, 
 function() {  $(this).animate({  height: '-=20'  });}
);

它工作正常,但是当我多次悬停时它将持续动画..
我想在一个动画完成后调用悬停动画.

Answer 1

你需要一些停留:

$('body').prepend('<div id="Checker"></div>');

$('#Checker').hover(
 function() { $(this).stop(true).animate({  height: '+=20' });}, 
 function() {  $(this).stop(true).animate({  height: '-=20'  });}
);

jQuery stop();

或者检查动画是否正在运行:

if( $(elem).is(':animated') ) { //do something }

结合它们:

$('#Checker').hover(
   function() { 
     $(this).not(':animated').stop(true, true).animate({  height: '+=20' });
   },
   function() {  
       $(this).not(':animated').stop(true, true).animate({  height: '-=20'  });
   }
);

但是如果鼠标在动画完成之前离开元素你仍然会遇到问题,你的第二个最佳选择就是放弃没有动画的部分,然后去停止(真,真),最好的选择是放弃+ =/ - =并直接设置值,这样你就知道它们会是什么,并且可以对你的动画实现一些控制,并且标志也可以正常工作.