функция прерывания fadeTo

Question

Есть ли способ прервать анимацию fadeTo при наведении мыши?Например: в приведенном ниже коде, когда кто-то выключает «ползунки $ control», они исчезают до .1 непрозрачности при 1750 мс, но когда вы наводите их на них, они уменьшаются до 1 непрозрачности при 500 мс.Если кто-то должен был отключить их, и до того, как 1750 мс поднялись, они вернулись к ним, ползунок $ controls не уменьшился бы до 1 непрозрачности, пока 1750 мс не поднялся, что делает его не отвечающим.

$(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);
        };
});

Для этого останавливается текущая анимация и выполняется переход к конечному результату перед началом следующей анимации.

Answer 2

Если вы вызовете метод stop для элемента, он остановит все анимации.

Answer 3

.hover( function() {
    $( this ).stop().fadeTo( 500, 1.0 );
}, function() {
    $( this ).stop().fadeTo( 1750, 0.1 );
});

Answer 4

Вы можете использовать .stop() для очистки анимации из очереди / остановки текущей анимации.

Лучше всего использовать это так:

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

Это очистит очередь, поэтому всеанимации останавливаются, а затем запускают анимацию с того места, где был остановлен элемент.