Question

我在这里给出一个简化的案例。我有2个div一个在另一个上面。当mouseenter上一个（蓝色）fadeOut和一个后面（红色）fadeIn。当鼠标袖子全部来到原始状态。

效果很好。唯一的问题是用户鼠标快速，可能是顶部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;
}

JQUERY：

$(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/

jQuery mouseleave快

2 个答案: