Question

I have an issue with jQuery and the hover event.

The issue is that the mouse event handlers are firing despite not leaving the div.
Causing the div to flicker.

Here is an example: http://jsfiddle.net/Fxy9P/

If you move your mouse slowly over the div, it will fire the effects repeatedly despite not leaving the div.

What am I doing wrong?

Answer 1

The mouseleave event fires as soon as the element is fully invisible. Try

$(this).fadeTo('slow', 0.5);

for comparison.

EDIT:

This should do what you wanted:

$(document).ready(function() {

  $('#strip').mouseenter(function() {
    $(this).fadeTo('fast', 0.0);
  });
  $('#strip').mouseleave(function() {
    $(this).fadeTo('fast', 1);
  });

});