jQuery 淡入淡出闪烁

发布于 2024-11-06 08:01:39 字数 1131 浏览 2 评论 0原文

我在这里有 jQuery 淡入淡出： 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>

谢谢，

Wade

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

止于盛夏 2024-11-13 08:01:39

发生这种情况是因为 fadeOut 末尾有一个 display:none，因此当您在 fadeOut 完成后移动鼠标时，它将触发取消悬停功能。相反，只需对不透明度进行动画即可：

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

示例 →

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 →

回复收藏 0 原文

当梦初醒 2024-11-13 08:01:39

正如另一个答案提到的， 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);   
})

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

回复收藏 0 原文

~没有更多了~