jQuery多個滾動事件

Question

我有一個登錄頁面，當它們的頂部達到窗口的50％時，必須顯示一些section元素。 我的問題是，當第一部分到達該點時，它會進行動畫處理，但其他部分甚至都可以設置動畫。 我只想在第一部分和其他部分設置動畫。 這是我的代碼：

/* Elements animation */
var wheight = $(window).height() / 2;
$(window).on("scroll", function() {
    inlineElements();
    $(window).off("scroll", inlineElements);
    accentElements();
    $(window).off("scroll", accentElements);
    lastElements();
    $(window).off("scroll", lastElements);
});
function inlineElements(e) {
    if ($(".inline-elem").offset().top >= wheight) {
        $(".inline-elem").each(function(i) {
            var el = $(this);
            var text = $(".fade-up-text");
            setTimeout(function() {
                el.fadeIn(500).removeClass("hidden");
                text.addClass("fadeinUp").removeClass("hidden");
            }, i * 500);
        });
    }
}
function accentElements(e) {
    if ($(".accent-elem").offset().top >= wheight) {
        $(".accent-elem").each(function(i) {
            var el = $(this);
            var trucker = $("#trucker");
            setTimeout(function() {
                el.addClass("slideLeft").removeClass("hidden");
                trucker.addClass("fadeinUp").removeClass("hidden");
            }, i * 500);
        });
    }
}
function lastElements(e) {
    if ($(".last-elem").offset().top >= wheight) {
        $(".last-elem").each(function(i) {
            var el = $(this);
            setTimeout(function() {
                el.addClass("fadeinUp").removeClass("hidden");
            }, i * 500);
        });
    }
}

Answer 1

這是帶有更改的正確代碼。

var halfHeight = $(window).height() / 2;

$(window).on("scroll", function() {
  inlineElements();
  accentElements();
  lastElements();
});

function inlineElements() {
  var item = $(".inline-elem").offset().top;
  var topWindow = $(window).scrollTop();
  if (item < (topWindow + halfHeight)) { // CHANGES HERE
  $(".inline-elem").each(function(i) {
      var img = $(this);
      var text = $(".fade-up-text");
      setTimeout(function() {
          img.fadeIn(2000).removeClass("hidden");
          text.addClass("fadeinUp").removeClass("hidden");
      }, i * 500);
  });
 }
}

function accentElements() {
  var item = $(".accent-elem").offset().top;
  var topWindow = $(window).scrollTop();
  if (item < (topWindow + halfHeight)) { // CHANGES HERE
   $(".accent-elem").each(function(i) {
      var el = $(this);
      var trucker = $("#trucker");
      setTimeout(function() {
          el.addClass("slideLeft").removeClass("hidden");
          trucker.addClass("fadeinUp").removeClass("hidden");
      }, i * 500);
   });
  }
}

function lastElements() {
  var item = $(".last-elem").offset().top;
  var topWindow = $(window).scrollTop();
  if (item < (topWindow + halfHeight)) { // CHANGES HERE
      $(".last-elem").each(function(i) {
          var el = $(this);
          setTimeout(function() {
              el.addClass("fadeinUp").removeClass("hidden");
          }, i * 500);
      });
  }
}