javascript - 淡出动画发生的时间比预期晚得多

Question

我想在滚动时更改元素的不透明度，然后在滚动停止后将其更改回来。这是我的代码:

$(window).scroll(function() {
    $(".BGlogoCircle").fadeTo( "fast", 1);
    console.log("scrolled");
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $(".BGlogoCircle").fadeTo("fast", 0.5);
        console.log("stopped");
    }, 250));
});

它只工作了一半，因为第一部分工作正常:我滚动，元素淡入，并且 console.log('scrolled') 触发。

一旦我停止滚动，console.log("stopped") 就会触发，但随后该元素只会在很晚之后才会淡出(我认为大约 5 秒左右)。

我的错误在哪里以及如何解决这个问题？

Answer 1

您可以使用以下命令对大量 fadeTo 动画进行排队:

$(".BGlogoCircle").fadeTo( "fast", 1);

由于 jQuery 将所有启动的动画(在同一元素上)保留在队列中，并且仅在先前排队的动画完成时才处理它们，因此只有当所有先前的动画都完成时，它才会到达 0.5 动画完毕。可能有很多这样的事件，因为 scroll 事件在典型的滚动操作期间会重复触发。

你应该更好stop启动下一个之前的任何上一个，以便动画队列保持为空:

$(".BGlogoCircle").stop().fadeTo( "fast", 1);

这解决了问题，但我建议对 fadeTo 的其他调用执行相同的操作:

$(window).scroll(function() {
    $(".BGlogoCircle").stop().fadeTo( "fast", 1);
    console.log("scrolled");
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {
        $(".BGlogoCircle").stop().fadeTo("fast", 0.5);
        console.log("stopped");
    }, 250));
});