刪除懸停事件的點擊，然後再綁定它

Question

我有一個名爲#footer的div，當用戶將鼠標懸停在它上面時，使用jQuery將其邊距動畫化。 #footer內部是一個div，被稱爲#toggle，點擊後可以使頁腳再次回落。

當點擊#toggle和#footer有動畫回落，如果我將它再次觸發懸停鼠標，即使鼠標不超過#footer了它所有的工作只是罰款。這讓我瘋狂！

這裏是jQuery的：

$('#footer').hover(function(){ 
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow"); 
    $('#toggle').addClass('expanded'); 
}); 

$('#toggle').click(function(){ 
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow"); 
    $(this).removeClass('expanded'); 
}); 

我需要什麼，我認爲是要解除綁定懸停事件時，它的完成，並重新綁定它被點擊#toggle時。也許？但我無法弄清楚如何使它工作。

Answer 1

您應該使用mouseenter事件而不是hover。

使用帶有單參數的hover將觸發mouseenter和mouseleave上的功能。

懸停（handlerInOut（eventObject）傳遞）

Answer 2

由於您只向hover()事件提供了一個參數，因此將在mouseenter和mouseleave上調用該參數。如果您將其更改爲使用mouseenter()它應該正常工作。

$('#footer').mouseenter(function(){ 
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow"); 
    $('#toggle').addClass('expanded'); 
}); 

Answer 3

解除綁定/重新綁定，聲明別處匿名函數（並給它一個名稱），則在把它作爲一個參數：

function footerHover() { 
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow"); 
    $('#toggle').addClass('expanded'); 
    $(this).unbind('hover'); 
} 
$('#footer').hover(footerHover); 

$('#toggle').click(function(){ 
    $('#footer').hover(footerHover); 
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow"); 
    $(this).removeClass('expanded'); 
}); 

您也可以嘗試結合懸停有兩個功能（因爲這是盤旋在怎樣來使用）：

$(selector).hover(functionWhileHovering, functionWhenNotHovering); 

更具體地說：

$('#footer').hover(function() { 
    $(this).stop(true, true).animate({"margin-bottom": "0px"}, "slow"); 
    $('#toggle').addClass('expanded'); 
    $(this).unbind('hover'); 
}, function() { 
    $('#footer').stop(true, true).animate({"margin-bottom": "-120px"}, "slow"); 
    $(this).removeClass('expanded'); 
});