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调用$(this).show()并显示它时，它会显示在鼠标指针下方，触发另一个hover事件，因为动画引导框使指针进入其区域。

在悬停处理程序的开头添加alert可以让你明白我的意思。

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