javascript - 中断 fadeTo 函数

Question

有没有办法在鼠标悬停时中断 fadeTo 动画？例如:在下面的代码中，当有人悬停“slider$controls”时，它们会在 1750 毫秒时逐渐变为 0.1 不透明度，但是当您将鼠标悬停在它们上方时，它们会在 500 毫秒时逐渐变为 1 不透明度。如果有人将鼠标悬停在它们上面并且在 1750 毫秒结束之前他们又悬停在它们上面，则 slider$controls 在 1750 毫秒结束之前不会淡化回 1 不透明度，这使得它看起来没有响应。

$(function () {
    var fadeDelay = 4000,
        // hide after 3 second delay
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.hover(function () {
                $(this).fadeTo(500, 1.0);
                }, function () {
                $(this).fadeTo(1750, 0.1);
                });
            }, fadeDelay);
        };
});

Answer 1

您需要使用 jQuery 的 .stop功能:

$(function () {
    var fadeDelay = 4000,
        // hide after 3 second delay
        timer, hideControls = function (slider) {
            clearTimeout(timer);
            setTimeout(function () {
                slider.$controls.hover(function () {
                $(this).stop(1,1).fadeTo(500, 1.0);
                }, function () {
                $(this).stop(1,1).fadeTo(1750, 0.1);
                });
            }, fadeDelay);
        };
});

这样做是停止当前动画，并在开始下一个动画之前跳转到最终结果。