Adding effects and animations to HTML using jQuery can add a lot of class to a page. It can also help with functionality and UX.

Too many times, however, I see a site that has this on it..

Rollover Me

… which is fine – until you repeat the action many times.
Try moving your mouse on and off the above box several times quickly. What you’ll notice is that the animations are trigged again and again and instead of overwriting the last one, they all end up getting queued, which leaves the page animating away on its own without any way of stopping it.

This is crap and is so easy to fix just by using the jQuery.stop() chained method.

Instead of using $( '.my_element' ).animate( {width:300} ); just add a stop() in there, so it reads:
$( '.my_element' ).stop().animate( {width:300} );

I don’t queue my animations!