Jquery mouseover / mouseleave

Jquery mouseover / mouseleave

本文关键字：mouseleave mouseover Jquery      更新时间：2023-09-26

我不确定到底要搜索什么，但这是我的问题。

<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-plus上快速悬停2次，Jquery会像在show,hide,show,hide中一样运行它4次，当它发生时，它看起来很迟钝

我怎样才能避免这个问题?

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

你需要的是。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处理程序的快捷方式

相关文章：