jQuery fade flickers

Question

I have jQuery fade going here: http://dougie.thewestharbour.com/

When you hover over the .main-overlay div I would like it to fade out then when you take your mouse

Answer 1

It's happening because fadeOut has a display:none at the end of it, so when you move your mouse after the fadeOut has completed it will trigger the unhover function. Instead, just animate the opacity:

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

Example →

Answer 2

As the other answer mentions, fadeOut sets display:none at the end, so the element no longer affects the layout of the page. The suggestion to just animate the opacity is correct, but there is already a function for doing so, fadeTo, which is a wee bit cleaner than writing the animation yourself:

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