При наведении анимация вызывается несколько раз

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

Но у вас все еще будут проблемы, если мышь покидает элемент до завершения анимации, вторым лучшим вариантом будет просто отбросить не анимированную часть и просто остановиться.(true, true), и лучшим вариантом было бы сбросить + = / - = и просто установить значения сразу, чтобы вы знали, какими они будут, и могли бы реализовать некоторые элементы управления для вашей анимации, и флаги также будут работать правильно.

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