Hello, I am Liam Goodacre, and Chris has asked me to write a short jQuery tutorial on how to achieve fading hover effects. I will demonstrate how to perform colour and image merging. We will be using jQuery and the jQuery Colour plugin.

When I first wrote something like this, I set a background div to fade in on mouse hover, and fade out on mouse leave. I found that if I quickly moved my mouse over and out of the link, then the background kept flashing the same number of times as my mouse. I then told the animation to stop before I set new animations, this solved the problem, but produced a new one.

The new problem: if I did the same test (repeated mouse hovering), then the link’s mouse out state, would slowly look the same as the hover state, therefore the background stopped fading out after a few times. I noticed that Chris had this same problem on his site.

I then had an idea; on mouse hover, if I stopped the current animation, and reset the background to be invisible, then fade it in, rather than starting it fading from its current state. This seems to have solved the problem.