jQuery淡出闪烁

Question

我有jQuery fade在这里:http://dougie.thewestharbour.com/

当你将鼠标悬停在.main-overlay 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');

    });

});

这是叠加div附加到的项目之一:

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

谢谢,

涉

Answer 1

它正在发生,因为它fadeOut有一个display:none结束,所以当你fadeOut完成后移动鼠标它将触发unhover功能.相反,只是animate在opacity:

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

示例→