JQuery fades flicker

Question

My jQuery disappears here: http://dougie.thewestharbour.com/

When you get the upper hand over div.main-overlay, I would like it to go out, and then when you separate it from the mouse, I would like it to disappear again.

However, now you can see how it flickers. I guess this is because the div disappears, so it is perceived as a mouse when it disappears, but I'm not sure how to solve it.

Here is my javascript:

$(document).ready(function () { $('.main-overlay').hover( //Mouseover, fadeIn the hidden hover class function() { $(this).fadeOut('1000'); }, //Mouseout, fadeOut the hover class function() { $(this).fadeIn('1000'); }).click (function () { //Add selected class if user clicked on it $(this).addClass('selected'); }); }); 

And here is one of the elements that the overlay div is attached to:

 <li><div class="main-overlay"></div><span class="caption">The store front</span><img src="http://dougie.thewestharbour.com/wp-content/uploads/store-front.jpg" alt="store front" title="store-front" width="730" height="360" class="alignnone size-full wp-image-98" /></li> 

Thanks,

Wade

Answer 1

This is because fadeOut has display:none at the end of it, so when you move the mouse after fadeOut completes, it calls the unhover function. Instead, just animate opacity :

 $('.main-overlay').hover(function() { $(this).animate({opacity: 0}, 1000); }, function() { $(this).animate({opacity: 1}, 1000); }) 

Example →

Answer 2

As mentioned in another answer, fadeOut sets display:none at the end, so the element no longer affects the page layout. The suggestion to simply animate the opacity is correct, but for this there is already a fadeTo function that is clean, which is what the animation itself is written:

 $('.main-overlay').hover( //Mouseover, fadeIn the hidden hover class function() { $(this).fadeTo(0,1000); }, //Mouseout, fadeOut the hover class function() { $(this).fadeTo(1,1000); })