jquery mouseover头痛。

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

FIDDLE DEMO

Answer 3

你应该对上一个动画做一个“停止（）”不会干扰当前动画。

关于回调它很容易使用：

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