Javascript 使用jquery.hover（）隐藏导航栏将挂起

我正在制作一个导航栏，当你将鼠标悬停在导航栏的剩余部分时，它会从我网站的左侧滑出。问题是，当动画运行时，您将鼠标悬停在内容部分上时，它不会被注册，导航栏会一直延伸，直到您再次在导航栏上来回悬停。有人知道这个问题的解决方案吗

    var hover = 0;                                  //navbar holder
var leave = 0;                                  //true if mouse left navbar

$("#navhover").hover(function(){

    hoverfunc(0,0,1,0,"+",1);
    $("#navhover").removeClass("navhovershow");
    $("#navhover").addClass("navhoverhide");

},function(){});

$("#content").hover(function(){

    hoverfunc(1,0,0,1500,"-",0);
    $("#navhover").removeClass("navhoverhide");
    $("#navhover").addClass("navhovershow");

},function(){});

function debugging(zeroone){
    $("#debugging").text(zeroone);
}

function hoverfunc(onleave,onhover,setleave,delay,addsub,numbah){
    if (leave == onleave && hover == onhover) {
        leave = setleave;
        hover = 1;
        debugging(numbah);
        setTimeout(function() {
            $("#navbar").animate({"left": addsub + "=170px"}, "300").queue(function(){
                hover = 0;
                $(this).dequeue();
            });
       },delay);
    }
};

在这里，您可以看到正在运行的代码： 对代码本身的任何改进也将受到高度赞赏

添加承诺

$("#navbar").animate({"left": addsub + "=170px"}, "300").queue(function(){
    hover = 0;
    $(this).dequeue();
});
$("#navbar").promise().done(function() {
   // check mouse location. collapse if out.
});

“承诺”将在动画完成后立即运行。有用

--编辑--

检查鼠标位置的最简单方法是添加鼠标移动功能。每次鼠标移动时，您都会将位置记录到window.x和window.y中

$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});

然后，您当前的鼠标位置始终是window.x。入住承诺

    $("#navbar").promise().done(function() {
        if (window.x > 170) {
            alert("out");
        }    else {
            alert("in");
        }
    });

---

这似乎是你想要的：

function show() {
    $("#navbar").stop().animate({"left": "0px"}, "300");
    $("#navhover").removeClass("navhovershow");
    $("#navhover").addClass("navhoverhide");
}

function hide() {
    $("#navbar").stop().animate({"left": "-170px"}, "300");
    $("#navhover").removeClass("navhoverhide");
    $("#navhover").addClass("navhovershow");
}

$("#navhover").hover(show, hide);

关键是调用

stop（）

，如果在动画运行时鼠标离开导航栏，则会中止当前正在运行的任何动画

---

您可以看到它在这把小提琴上工作：

没错，我希望它能像这样工作。但是，如果我将元素添加到#导航栏并将鼠标悬停在这些元素上，导航栏将随着鼠标的闪烁慢慢向左或向右移动。就像它一次又一次地盘旋。我之所以选择了navhover div，是因为我不想在动画完成之前选择navbar上的元素。这可能会起作用，但我不知道如何检查鼠标当前是否在navbar或content上。