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'  });
   }
);

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

Answer 2

尝试设置一些标志，指示动画是否正在进行中（PS：未测试）：

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

On Hover动画多次调用

2 个答案: