jquery - jQuery mouseleave 快速

Question

我在这里给出一个简化的案例。我有 2 个 div 一个在另一个之上。当鼠标进入顶部的（蓝色）fadeOut 和后面的（红色）fadeIn 时。当 mouseleeve 时，一切都回到原来的状态。

它运作良好。唯一的问题是当用户快速移动鼠标时，可能是当顶部 div（蓝色）仍然存在时。这种情况下怎么会回到原来的情况呢？

你可以在这里查看你的答案：http: //jsfiddle.net/Narcis/ywTBe/

HTML：

<div id="blue"></div>
<div id="red"></div>

CSS：

#blue{
    position:absolute;
    top:100px; left:100px;
    width:100px; height:100px;
    background:blue;
    z-index:1;
}

#red{
    position:absolute;
    top:100px; left:100px;
    width:100px; height:100px;
    background:red;
    z-index:0;
}

查询：

$(function () {
    $("#blue").mouseenter(function () {
        $("#blue").fadeOut("normal");
        $("#red").fadeIn();
    });

    $("#red").mouseleave(function () {
        $("#blue").fadeIn("normal");
        $("#red").fadeOut();
    });
})

Answer 1

这是jsfiddle：http: //jsfiddle.net/JZSRk/

        $(function(){
        $("#blue").mouseenter(function() {
            $("#blue").fadeOut("normal"); 
            $("#red").fadeIn();
        });
        $("#blue").mouseleave(function() {
            $("#blue").fadeIn("normal");
            $("#red").fadeOut();
        });
        })

Answer 2

你可以让它像这样工作 -

html

<div id='wrapper'>
    <div id="blue"></div>
    <div id="red"></div>
</div>

JS

$(function () {
    $("#wrapper").mouseenter(function () {
        $("#blue").stop(true, true).fadeOut("normal");
        $("#red").stop(true, true).fadeIn();
    });

    $("#wrapper").mouseleave(function () {
        $("#blue").stop(true, true).fadeIn("normal");
        $("#red").stop(true, true).fadeOut();
    });
});

演示---> http://jsfiddle.net/ywTBe/1/