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

Answer 2

试试这个：

＆＃13;

$(window).scroll(function() {
  $(".BGlogoCircle").fadeIn("slow");
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    // do something
    $(".BGlogoCircle").fadeOut("slow");
  }, 250));
});

＆＃13;

.cool {
  height: 1000px;
}
.BGlogoCircle {
  background: #333333;
  position: fixed;
  width: 100%;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="cool">
    <div class="BGlogoCircle">Test</div>
  </div>
</body>

</html>

＆＃13;

淡出动画发生的时间比预期要晚

2 个答案: