JQuery mouseleave 然后在 mouseleave 中设置的 fadeOut 持续时间内进行 mouseover

Question

我似乎无法为我遇到的这个问题找到解决方案。发生的事情是，当我触发 mouseleave，然后尝试在 mouseleave 到 fadeOut() 的持续时间内触发 mouseover 时，mouseover 不会触发。有没有办法解决这个问题，或者我应该使用 jquery 动画功能？

$("#homepage-slider").on({
    mouseover: function() {
        $(".direction-next").fadeTo(500, .7);
        $(".direction-previous").fadeTo(500, .7);
    },
    mouseleave: function() {
        $(".direction-next").fadeOut(500);
        $(".direction-previous").fadeOut(500);
    }
});

Answer 1

在你的情况下，你需要 stop 动画，clear the queue 然后 jump to the end。

你会怎么做？通过利用 jQuery 的 .stop(true,true).

$("#homepage-slider").on({
    mouseover: function() {
        $(".direction-next").stop(true, true).fadeTo(500, .7);
        $(".direction-previous").stop(true, true).fadeTo(500, .7);
    },
    mouseleave: function() {
        $(".direction-next").fadeOut(500);
        $(".direction-previous").fadeOut(500);
    }
});

obligatory jsFiddle

JQuery mouseleave 然后在 mouseleave 中设置的 fadeOut 持续时间内进行 mouseover

JQuery mouseleave and then mouseover within a fadeOut duration set in mouseleave

jquery

jquery-animate

jquery-events