Question

Example:

http://jsfiddle.net/patrioticcow/XnnvD/4/

That is using a delay to delay the animation for a bit but the problem occurs when the user hovers with the mouse a few times over the black image, the animation will remember to continue.

This is an interesting effect but not what I want. I would like the animation not to occur if the user hovers over a few times, let’s say in a second or so.

Answer 1

If your intent is to delay the animation until the speed of the mouse implies an intent to hover, look into the jQuery HoverIntent plugin. This plugin can be used to fire a hover callback if and only if the mouse has decelerated enough over an item to imply a hover. It can be used by including it and replacing .hover() calls with .hoverIntent() ones.