Question

有没有办法在鼠标悬停时中断fadeTo动画？例如：在下面的代码中，当有人徘徊“滑块$控制”时，它们会在1750毫秒时淡化到.1不透明度，但是当你将它们悬停在它们上面时，它们会在500毫秒时淡化为1个不透明度。如果有人徘徊在它们之前并且在1750ms之前它们在它们上面徘徊，那么滑块$ controls将不会淡化回1个不透明度，直到1750ms上升，这使得它看起来没有反应。

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

中断fadeTo功能

4 个答案: