Question

我有一个div框，可以改变高度并隐藏文本。在jQuery中我有这个：

$("#nav_bar").mousedown(function() {
    var mousePos;
    $(this).animate({height: "3.750em"}, 500, "swing");
    $("#home, #videos, #about_us, #unknown").show();
    $(this).mouseleave(function() {
        mousePos = 1;
        $(this).delay(1000).animate({height: "1em"}, 500, "swing");
        $("#home, #videos, #about_us, #unknown").delay(1000).hide(250);
        $(this, "#home, #videos, #about_us, #unknown").mouseenter(function({
            mousePos = 0;
        });
        if(mousePos == 1) {
            $("#nav_bar").animate({height: "1em"}, 500, "swing");
            $("#home, #videos, #about_us, #unknown").hide(250);
        } else if (mousePos == 0) {
            $("#nav_bar").stop(true, true);
            $("#home, #videos, #about_us, #unknown").stop(true, true);
        }
    });
});

问题是当变量更新并重新进入框时动画不会停止。我想要的是当鼠标重新进入div时停止的div动画。

Answer 1

它不会停止，因为最多的功能仍在运行。试试这个：

function showBars(){
 $(this).animate({height: "3.750em"}, 500, "swing");
    $("#home, #videos, #about_us, #unknown").show();
}

function hideBars(){
 $("#nav_bar").animate({height: "1em"}, 500, "swing");
            $("#home, #videos, #about_us, #unknown").hide(250);
}

function animateBox(){
 $(this).delay(1000).animate({height: "1em"}, 500, "swing");
        $("#home, #videos, #about_us, #unknown").delay(1000).hide(250);
}

function leaveBox(){
  $("#nav_bar").stop(true, true);
            $("#home, #videos, #about_us, #unknown").stop(true, true);
}

$("#nav_bar").hover(showBars,hideBars);
$("#home, #videos, #about_us, #unknown").hover(animateBox,leaveBox);

请原谅我，如果语法错误。

当鼠标进入div时停止jQuery动画

1 个答案: