Jquery mouseover/mouseleave

Question

我不确定要搜索什么,但这是我的问题.

<script>
    function Gbox () {
        var hide = document.getElementById('g-box').style.display = "none";

    }
    Gbox();
    $("#g-plus").mouseover(function () {
        $("#g-box").show(400);  
    });
    $("#g-plus").mouseleave(function () {
        $("#g-box").hide(400);  
    });

</script>

说Jquery没有问题.

唯一的问题是,如果我在#g-plusJquery 上快速进出2次,那么它会运行4次,show,hide,show,hide当它发生时看起来很迟钝

我该如何避免这个问题？

Answer 1

$("#g-plus").hover(function () {
    $("#g-box").show(400);  
},function () {
    $("#g-box").hide(400);  
});

Answer 2

你需要的是.stop()来停止上一个动画

function Gbox() {
    $("#g-box").hide();
}
Gbox();
$("#g-plus").hover(function () {
    $("#g-box").stop().show(400);
}, function () {
    $("#g-box").stop().hide(400);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="g-plus">g-plus</button>
<div id="g-box">g-box</div>

注意:您可以使用.hover()作为快捷方式来注册mouseenter和mouseleave处理程序