Question

I am using below code to animate an Image

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

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

It works fine, But when I hover multiple times it will animate continuously..
I want to invoke on Hover animation after one animation is complete.

Answer 1

You need some stops:

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

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

jQuery stop();

Or check if animation is running:

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

Combining them:

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

But your still going to have problems if the mouse leaves the element before the animation is complete, your second best option would be to just drop the not animated part, and just go for stop(true, true), and the best option would be to drop the += / -= and just set the values outright, that way you know what they will be and can implement some controls on your animations, and flags would also work properly.