Jquery fadeOut问题

Question

这只是一个增加我对Jquery知识的测试，请告诉我为什么当我悬停在#box5对象上时，它不止一次地显示白色和蓝色的框。

$(document).ready(function () {
    $("#Box5").hide();
    $("#Button").click(function () {
    $("#Button").val("Show");
    $("#BoxArea").toggle();
    $("#Box5").toggle();
});
$("#Box5").hover(function () {
    $(this).css("background-color", "green");
    $(this).fadeOut(function () {
        $(this).css("background-color", "red");
        $(this).show(100);
        $(this).fadeOut(function () {
            $(this).css("background-color", "white");
            $(this).show(100);
            $(this).fadeOut(function () {
                $(this).css("background-color", "blue");
                $(this).show(100);
            });
         });
      });
   });
});

http://jsfiddle.net/45X2L/3/

Answer 1

.hover()方法为mouseenter和mouseleave事件绑定处理程序。 有关更多细节，请参见.mouseenter()和.mouseleave()的讨论。

将事件更改为mouseenter，它将正常工作。

$(document).ready(function () {
    $("#Box5").hide();
    $("#Button").click(function () {
        $("#Button").val("Show");
        $("#BoxArea").toggle();
        $("#Box5").toggle();
    });
    $("#Box5").mouseenter(function () {
        $(this).css("background-color", "green");
        $(this).fadeOut(400, function () {
            $(this).css("background-color", "red");
            $(this).show(400);

            $(this).fadeOut(400, function () {
                $(this).css("background-color", "white");
                $(this).show(400);

                $(this).fadeOut(400, function () {
                    $(this).css("background-color", "blue");
                    $(this).show(400);

                });
            });

        });
    });


});

Answer 2

我认为，当您调用fadeOut #Box5并显示它时，它就会显示在鼠标指针下面，从而触发另一个hover事件，因为动画引导该框让指针进入其区域。

在悬停处理程序的开头添加一个alert将让您明白我的意思。

我认为解决这个问题的唯一方法是在执行fadeOut/fadeIn操作时关闭悬停处理程序，然后在完成时重新打开它。