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

你的问题在于当前代码会在滚动到指定位置时一次性给所有.demo元素添加动画类，导致它们同时执行动画。要实现逐个触发、完成一个再执行下一个的效果，我们需要跟踪每个元素的动画状态，结合视口检测和动画结束事件来控制顺序。

修改后的完整代码： #

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（移除全局动画延迟，改为动态控制）

.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(){
  // 初始化每个demo元素的动画状态：未执行
  $('.demo').each(function() {
    $(this).data('animated', false);
  });

  // 判断元素是否进入视口的工具函数
  function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    // 只要元素顶部进入视口范围，就判定为可见
    return rect.top <= window.innerHeight && rect.bottom >= 0;
  }

  // 触发下一个符合条件的元素动画
  function triggerNextAnimation() {
    // 找到第一个「未动画」且「在视口内」的元素
    const $nextEl = $('.demo[data-animated="false"]').filter(function() {
      return isInViewport(this);
    }).first();

    if ($nextEl.length) {
      // 标记为已动画，添加动画类
      $nextEl.data('animated', true).addClass('fadeInUp');
      // 监听动画结束事件，完成后自动触发下一个
      $nextEl.one('animationend webkitAnimationEnd', function() {
        triggerNextAnimation();
      });
    }
  }

  // 滚动时检查是否有可触发的元素
  $(document).scroll(function() {
    triggerNextAnimation();
  });

  // 页面加载完成后先检查一次，避免初始状态下视口内的元素不触发
  triggerNextAnimation();
});

代码说明： #

1. 状态标记：用data-animated属性记录每个div是否已经执行过动画，避免重复触发。
2. 视口检测：isInViewport函数通过元素的位置判断是否进入用户可见区域，确保只有当div滚入视野时才会触发动画。
3. 顺序控制：triggerNextAnimation函数只会触发第一个符合条件的div动画，并且在该动画完成后（通过animationend事件监听），才会递归调用自身去触发下一个div的动画，完美实现「逐个执行」的效果。
4. 初始检查：页面加载时就调用一次triggerNextAnimation，确保一开始就在视口内的div也能正常触发动画。

这样修改后，你就能看到滚动时div会逐个从下方淡入，完成一个再执行下一个的流畅效果了。

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