jquery - jquery mouseenter 头痛。

Question

我有鼠标进入和鼠标离开和淡出的问题。如果您缓慢移动鼠标，该代码可以正常工作。如果您快速将鼠标悬停在元素上，它会停留在错误的状态。我的印象是它需要一个回调来确认淡出的完成。但我不知道该怎么做。这是一个小提琴 http://jsfiddle.net/alexnode/6s7Jg/1/

$('#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。

Answer 1

在开始新动画之前，您需要使用stop()来结束当前动画。您还可以像这样简化处理程序：

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

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

Answer 2

这是因为 mouseenter 和 mouseout 不在同一个元素上工作，你应该这样做：

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

小提琴演示

Answer 3

你应该做一个“stop()”，这样之前的动画就不会干扰当前的动画。

关于回调它很容易使用：

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