jQuery animation queue problem

Published: 15 years ago

• Snippet Length: 2 minutes
• Difficulty: Easy
• Technologies: JavaScript, jQuery, HTML
  

When I first starting playing around with jQuery I found myself encountering animated elements that were still moving/bouncing around long after they should have been.

After investigating this I found that one way to counter act this would be use the jQuery function stop() before calling animate()

This example demonstrates it;

$(document).ready(function() {
    // effect is applied when hover takes place
    $("#nav a").hover( function() {
		$(this).stop().animate({ "height" : "40px" })	
	},
		function() {
			$(this).stop().animate({  "line-height" : "40px" })	
		}
	);
});