jQuery淡入淡出 [英] jQuery fade flickers

问题描述

我将jQuery淡入此处： http://dougie.thewestharbour.com/

当您将鼠标悬停在.main-overlay div上时，我希望它淡出，然后当您将鼠标移开时，我希望它淡入。

然而，你可以看到它现在只是闪烁。我猜这是因为div消失了，所以它在淡出时被当作鼠标使用，但我不知道如何解决它。

这是我的javascript：

  $（document）.ready（function（）{
 
 
 $ （'.main-overlay'）。hover（
 
 //鼠标悬停，淡入隐藏的悬停类
 function（）{
 
 $（this）.fadeOut （'1000'）; 
 
}，
 
 //鼠标移出，淡入淡出类
 function（）{
 
 $（这个）.fadeIn（'1000'）; 
 
}）。click（function（）{
 
 //如果用户点击它，添加选定的类
 $ （this）.addClass（'selected'）; 
 
}）; 
 
}）; 
  

以下是叠加div附加的项目之一：

 < li>< div class =main-overlay>< / div>< span class =caption> The店面前< / span>< img src =http://dougie.thewestharbour.com/wp-content/uploads/store-front.jpgalt =店前title =store-frontwidth = 730height =360class =alignnone size-full wp-image-98/>< / li> 
  

谢谢，

Wade

解决方案

这是因为 fadeOut 有一个 display：none 结束时，所以当 fadeOut 完成后移动鼠标时，它将触发unhover功能。相反，只是动画 不透明：

  $（'。main-overlay'）。hover（function（）{
 $（this）.animate（{opacity：0}，1000）; 
}，function （）{
 $（this）.animate（{opacity：1}，1000）; 
}）
  

示例&＃x2192;

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 off of it, I would like it to fade back in.

However, you can see it's just flickering right now. I'm guessing it's because the div disappears so it's treated as a mouseout when it's faded out but I'm not sure how to go about solving 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 items 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

解决方案

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 →

这篇关于jQuery淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！