當鼠標進入div時停止jQuery動畫

我有一個改變高度並隱藏文本的div框。在jQuery中我有這樣的：當鼠標進入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動畫。

來源

2015-10-03 DoubleDogg6

不解除綁定嵌套事件處理程序通常是有問題的開始... – Shikkediel

Shikkediel你是什麼意思？我沒有任何綁定的東西（我仍然可以看到） – DoubleDogg6

但是，您可以在'mousedown'內的'mouseleave'內使用'mouseenter'。所以每當第一次mousedown被按下，它會創建一個新的其他實例 - 它們將被記住，積累並相應觸發... – Shikkediel

它不會停止，因爲最外面的功能仍然運行。如果語法錯誤

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);

對不起，：試試這個。

來源

2015-10-03 07:19:29

我會嘗試並讓你知道 – DoubleDogg6

當鼠標進入div時停止jQuery動畫

回答

相關問題