jquery mousenter頭痛。

我有一個問題，鼠標輸入和鼠標離開和淡出。如果您慢慢移動鼠標，代碼工作正常。如果你將鼠標懸停在這些元素上，它會停留在錯誤的狀態。我有一個印象，它需要回調來確認淡出的完成。但我不知道該怎麼做。這裏是一個小提琴 http://jsfiddle.net/alexnode/6s7Jg/1/jquery mousenter頭痛。

$('#button1r').mouseenter(function() { 
    $('#button1r').fadeOut("300"); 
}); 
$('#button1').mouseout(function() { 
    $('#button1r').fadeIn("300"); 
}); 
$('#button2r').mouseenter(function() { 
    $('#button2r').fadeOut("300"); 
}); 
$('#button2').mouseout(function() { 
    $('#button2r').fadeIn("300"); 
}); 
$('#button3r').mouseenter(function() { 
    $('#button3r').fadeOut("300"); 
}); 
$('#button3').mouseout(function() { 
    $('#button3r').fadeIn("300"); 
}); 
$('#button4r').mouseenter(function() { 
    $('#button4r').fadeOut("300"); 
}); 
$('#button4').mouseout(function() { 
    $('#button4r').fadeIn("300"); 
}); 

<img id="button1" class="button" data-case="translation" src="http://www.translationgames.org/images/button1overlay.png" alt="Translation games"> 
<img id="button1r" class="button" data-case="translation" src="http://www.translationgames.org/images/button1.png" alt="Translation games"> 
<img id="button2" class="button" data-case="art" src="http://www.translationgames.org/images/button2overlay.png" alt="Translation games"> 
<img id="button2r" class="button" data-case="art" src="http://www.translationgames.org/images/button2.png" alt="Translation games">

我想懸停和它創造了另一個問題，顯示我試圖打破它的MouseEnter。

來源

2013-06-20 alexnode

當你調用淡出你綁定的鼠標輸入相同的元素/鼠標離開來，然後它會自動儘快淡出完成後調用鼠標移開。你爲什麼想這麼做？ – Ohgodwhy

使用類怎麼樣？ –

這個想法是每個人都會有不同的表現。我現在正在做同樣的事情，試圖找出什麼是錯誤的 – alexnode

你應該做一個「stop（）」，以便以前的動畫不會干擾當前的動畫。

它非常容易使用的回調：

$('#button4r').mouseenter(function() { 
    $('#button4r').fadeOut("300", function fadedOut(){ 
     alert("#button4r fadedOut") 
    }); 
});

來源

2013-06-20 14:08:00 Edorka

我試過這種方法，如果你真的很快移動，仍然會使動畫保持活動狀態。 – alexnode

這顯示了一些承諾，我猜如果我用布爾我可以有更多的控制時，它播放。我現在正在努力。 – alexnode

這是因爲的mouseenter和鼠標移開不相同的元素工作，你應該做這樣的事情：

$('#button1r').mouseenter(function() { 
    $(this).fadeOut("300"); 
}).mouseout(function() { 
    $(this).fadeIn("300"); 
});

FIDDLE DEMO

來源

2013-06-20 14:10:00

這是可行的，但會產生另一個問題，即當鼠標停留在閃爍的按鈕上時。它一直重複動畫。我會多玩一點。也許mousein會工作。 – alexnode

我試過鼠標，但它沒有任何區別。我也試着用它停下來，但不起作用 – alexnode

你看看你的小提琴最後三個按鈕看起來有什麼問題，看起來他們實際上沒有正常工作。如果快速移動鼠標，其中一個或兩個仍保持活動狀態。當光標結束時，最上面的一個閃爍。 – alexnode

在開始新動畫之前，您需要使用stop()結束當前動畫。您還可以簡化處理程序，如下所示：

$('#button1r, #button2r, #button3r, #button4r').mouseenter(function() { 
    $(this).stop().fadeOut("300"); 
}); 

$('#button1, #button2, #button3, #button4').mouseout(function() { 
    $('#' + this.id + 'r').stop().fadeIn("300"); 
});

來源

2013-06-20 14:10:15 cfs

非常感謝你，如果你真的很快運行你的鼠標，有幾個按鈕仍然有效。 – alexnode

我只是顯示失敗的解決方案！這樣可行！它是輝煌的。你爲什麼要刪除它？我想將其標記爲正確的答案。 – alexnode

啊......原來它的工作不正常......我忘了將失敗函數封裝在一個'function（）{...}'中，所以它在開始動畫時立即執行。如果仔細觀察，淡出的動畫不見了 – cfs

jquery mousenter頭痛。

回答

相關問題