Question

我刚刚进入jQuery并且有很多关于如何进行这种简单淡入淡出的教程，但是来自AS3背景，看起来下面的代码应该可行，我很好奇为什么没有。

在rollOver上黄色框淡出
然而，在rollOut上，黄色的盒子有点淡出然后再次出现

不确定为什么它会“反弹”鼠标输出功能......想法？

HTML

<div class="fade">
    <h2>The Title</h2>

    <p>Lorem ipsum.</p>
</div>

的jQuery

<script>

    (function() {

        var fade = $('div.fade');

        fade.mouseover(function() {

                fade.fadeOut(500);

        });

        fade.mouseout(function() {

            fade.fadeIn(600);
        });

    })();

</script>

Answer 1

这是因为你逐渐淡出mouseover。淡出完成后，元素将被隐藏。因此，第二次移动鼠标时，会注册一个mouseout事件，然后它会淡入。

尝试使用.animate({opacity: 0}, 600);和.animate({opacity: 1}, 600);等

Answer 2

您应该考虑使用mouseenter / mouseleave代替。

看看 - http://www.quirksmode.org/js/events_mouse.html

hoverintent plugin也值得一试。

Answer 3

您应该使用mouseenter和mouseleave功能。每当您的鼠标进入或离开元素时，mouseover都会触发。

检查demo以查看mouseover的实际操作，并了解其为何不适合。

我的jQuery悬停fadeIn有什么问题？

3 个答案: