中斷fadeTo功能

Question

有沒有辦法在鼠標懸停時中斷fadeTo動畫？ 例如：在下面的代碼中，當有人將“ slider $ controls”懸停時，它們在1750ms時褪色為.1不透明度，但是當您將它們懸停在它們上時，它們在500ms時褪色為1。 如果有人將鼠標懸停在其上方，則在1750ms之前，他們將鼠標懸停在其上，直到$ 1750ms為止，slider $ controls不會退回到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);
        };
});

這樣做是停止當前動畫，並在開始下一個動畫之前跳到最終結果。

Answer 2

您可以使用.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);
        };
});

這將清除隊列，因此將停止所有動畫，然后從元素已停止的位置開始動畫。

Answer 3

如果在元素上調用stop方法，它將停止所有動畫。

Answer 4

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