javascript - 我的 jQuery 悬停淡入淡出效果有什么问题？

Question

http://leongaban.com/_stack/fade/

我刚接触 jQuery，那里有很多关于如何进行简单淡入淡出的教程，但是来自 AS3 背景，我的代码似乎应该可以工作，我很好奇为什么它不不。

• 在 rollOver 黄色框淡出
• 然而，在推出时，黄色框有点淡出然后再次淡入

不知道为什么它会“反弹”鼠标悬停功能......想法？

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插件也值得一试。

Answer 3

您应该使用mouseenterandmouseleave函数。mouseover每次鼠标进入或离开元素时触发。

检查演示以查看mouseover实际情况，并了解为什么它不是正确的事件。