Prevent JQuery animation from occuring if an animation is already in progress

Question

I have some JQuery code in the click event handler for a checkbox that updates the value of a span control on the page, then animates the background color of the span tag to yellow and then fade back to white in about a second to draw attention to the user that the value of the span has changed. The problem is that if a user clicks repeatedly on the checkbox, then the animation occurs over and over for how ever many times the user clicked. Any one know how to prevent the JQuery animation from occuring if an animation is already in progress.

Answer 1

Simply call stop() on the object before animating it:

 $('#button').click( function() {
  $('#animatedSpan').stop().animate( { } );
 });