如何使用jQuery实现滚动时逐个动画显示多个div元素

我明白你想要实现滚动到特定位置时，让多个div逐个依次执行动画，而不是所有元素同时动的效果。咱们来一步步修改你的代码，达到这个目标：

问题分析 #

你原来的代码会在滚动到y > 500时，给所有.demo元素添加fadeInUp类，导致所有div同时开始动画。我们需要做的是检测每个div是否进入可视区域（或到达指定滚动位置），并且只给未执行过动画的元素触发动画，同时控制逐个触发的顺序。

修改后的完整代码 #

HTML 代码 #

和你的原代码保持一致即可，不需要额外修改：

<body>
  <div class="intro styling demo"></div>
  <div class="intro styling demo"></div>
  <div class="intro styling demo"></div>
  <div class="intro styling demo"></div>
  <div class="intro styling demo"></div>
  <div class="intro styling demo"></div>
  <div class="intro styling demo"></div>
</body>

CSS 代码 #

保留你的自定义动画，调整全局延迟并新增animated类标记已执行动画的元素：

.intro {
  opacity: 0;
}

.styling {
  height: 300px;
  width: auto;
  background-color: red;
  margin-top: 10px;
}

@-webkit-keyframes fadeInUpA {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpA {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.fadeInUp {
  animation-duration: 3s;
  /* 移除全局延迟，改为逐个元素的递增延迟 */
  -webkit-animation-name: fadeInUpA;
  animation-name: fadeInUpA;
  animation-fill-mode: both;
}

jQuery 代码 #

这里是核心修改，添加了视口检测、节流函数和逐个触发的逻辑：

$(document).ready(function() {
  // 节流函数：避免滚动事件过于频繁触发，优化页面性能
  function throttle(func, delay) {
    let lastExecution = 0;
    return function() {
      const now = Date.now();
      if (now - lastExecution >= delay) {
        func.apply(this, arguments);
        lastExecution = now;
      }
    };
  }

  // 判断元素是否进入可视区域
  function isElementInViewport(element) {
    const rect = element.getBoundingClientRect();
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    return rect.top <= windowHeight && rect.bottom >= 0;
  }

  // 处理滚动时的动画触发逻辑
  function triggerAnimationsOnScroll() {
    $('.demo').each(function(index) {
      const $currentDiv = $(this);
      // 只给未执行过动画且进入视口的元素触发动画
      if (!$currentDiv.hasClass('animated') && isElementInViewport(this)) {
        // 给每个元素添加递增延迟，实现从上到下逐个动画的效果
        setTimeout(() => {
          $currentDiv.removeClass('intro').addClass('fadeInUp animated');
        }, index * 500); // 每个元素延迟500ms，可根据需求调整间隔
      }
    });
  }

  // 页面加载完成后先检查一次，避免已在视口的元素无动画
  triggerAnimationsOnScroll();
  // 绑定节流后的滚动事件处理函数
  $(document).scroll(throttle(triggerAnimationsOnScroll, 100));
});

代码细节解释 #

1. 节流函数：限制滚动事件的触发频率，每100ms才执行一次动画检测，避免频繁操作导致页面卡顿。
2. 视口检测函数：通过getBoundingClientRect()获取元素的位置信息，判断它是否进入了浏览器的可视区域。
3. 滚动处理逻辑：遍历所有.demo元素，只有当元素未执行过动画（无animated类）且进入视口时，才触发动画。通过index * 500ms的递增延迟，让div按从上到下的顺序逐个执行动画，你可以调整这个延迟时间来控制动画间隔。
4. 初始检测：页面加载时执行一次检测，确保刷新页面后已经在视口内的div也能正常触发动画。

如果你想让动画在元素到达更靠上的位置时提前触发（比如进入视口前就开始动画），可以把isElementInViewport函数替换成下面的逻辑：

function shouldTriggerAnimation(element) {
  const elementTop = $(element).offset().top;
  const scrollPosition = $(document).scrollTop();
  const windowHeight = $(window).height();
  // 当元素顶部距离页面顶部的位置 - 滚动距离 < 窗口高度的80%时触发
  return elementTop - scrollPosition < windowHeight * 0.8;
}

这样修改后，就能完美实现你想要的滚动时逐个触发div动画的效果了！

内容的提问来源于stack exchange，提问作者hassan khan