Question

I have this image on which I have given an onclick function which in turn calls a function which performs some animation on screen. Now if you click the image too many times too fast the animation goes on that many times even after the user has stopped clicking. I do not want that happening. I want the user be able to click next time only after the animation is over (read JQuery animate) for the previous click.

Answer 1

You can either just call

.stop( true, true )

before you call any jQuery fx function or you can check if the target element is currently animated, like

if(!$( '#myimage' ).is( ':animated' ) ) {
}

The former solution would just “reset” the animation (parameters indicate, clear queue and jump to end). With the latter solution you could just not allow any further click(handlers) from firing.

Reference: .stop(), :animated selector