通过 jQuery .animate() 控制滚动动画

Question

我想控制滚动元素的不透明度。当用户向下滚动页面时，不透明度会缩小，当您将页面向上滚动到顶部元素时，不透明度应该 return 恢复正常。阅读 jQuery 文档我相信这会起作用：

$(document).on("scroll", function() {
  console.log($(document).scrollTop());
  if ($(document).scrollTop() > 250) {
    $("#sportsImages").animate(
      {
        opacity: 0.25
      },
      2000
    );
  } else {
    if ($(document).scrollTop() < 250) {
      $("#sportsImages").animate(
        {
          opacity: 1
        },
        2000
      );
    }
  }
});

但不幸的是，这没有按预期工作。即使我向上滚动页面，不透明度仍保持为 .25。欢迎提出任何建议。提前致谢。

Answer 1

以下是我如何让人们知道的：

let pageScrolled = false;

$(document).scroll(function() {
  if ($(document).scrollTop() > 250) {
    if (pageScrolled === false) {
      pageScrolled = true;
      $("#sportsImages")
        .stop()
        .animate({ opacity: 0.25, width: "50%", margin: "0, 25%" }, 1200);
    }
  } else {
    if (pageScrolled === true) {
      pageScrolled = false;
      $("#sportsImages")
        .stop()
        .animate({ opacity: 1, width: "100%", margin: "0" }, 1200);
    }
  }
});

通过 jQuery .animate() 控制滚动动画

Controlling an animation with scrolling via jQuery .animate()

jquery

jquery-animate