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

Question

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

我刚刚进入jQuery并且有很多关于如何进行这种简单淡入淡出的教程,但是来自AS3背景,看起来我的代码应该可以工作,我很好奇为什么它没有"T.

• 在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);等等.