javascript - Run animation again when this animation is ready -

i have simple jquery animation made below:

$('#message').animate({     height: "+=50px" }, 1000).delay(1000).animate({     height: "-=50px" }, 1000); 

when click on button , runs good. when click button again while animation still running adds sort of queue , after animation done runs time. when spam button 1 second long, goes , down, , down , on.

i have tried using .stop and.query functions can't make work somehow.

i want run animation when click button , animation 'ready'.

if don't want mess queues, can add flag var animrunning = false; , set true when run animation until ends, set false. of course, don't run animation if flag true.

something this:

if (animrunning)     return false; animrunning = true; $('#message').animate({     height: "+=50px" }, 1000, function(){ // using complete callback instead of delay here     animate({         height: "-=50px"     }, 1000, function(){         animrunning = false;     }); })