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

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);   
})