JQuery выцветанию мерцает

Question

У меня есть JQuery исчезать происходит здесь: http://dougie.thewestharbour.com/

При наведении курсора на .main-оверлей DIV Я хотел бы постепенно исчезать, а затем, когда вы берете мышь от этого, я хотел бы, чтобы исчезают.

Однако вы можете видеть, что это просто мерцает прямо сейчас. Я предполагаю, что это потому, что div исчезает, поэтому он рассматривается как мыши, когда он исчезает, но я не уверен, как его решить.

Вот мой 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'); 

    }); 

}); 

А вот один из элементов, которые оверлей ДИВ прикреплен к:

<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> 

Спасибо,

Wade

Answer 1

Это потому что fadeOut имеет display:none в конце его, поэтому, когда вы перемещаете мышь после завершения fadeOut, она вызывает функцию unhover. Не Вместо этого, просто animateopacity:

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

Example →

Answer 2

Как отмечает другой ответ, fadeOut наборы display:none в конце, так что элемент больше не влияет на макет страницы. Предложение просто анимировать прозрачность является правильным, но уже есть функция для этого, fadeTo, что чуть-чуть чище, чем писать анимации себя:

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