如何为视口内元素添加带延迟的play类实现逐个淡入？

嘿，要让这些.statement-block元素在进入视口时逐个淡入，其实只需要给每个元素加上基于索引的延迟定时器就可以啦！我来给你修改代码，顺便解释下思路：

核心思路 #

我们可以利用元素在集合中的索引（也就是它的展示顺序），给每个元素设置不同的延迟时间——比如第一个元素延迟0ms，第二个300ms，第三个600ms...这样即使它们同时进入视口，也会依次触发play类的动画。同时还要注意避免重复触发定时器，不然滚动的时候会反复添加类哦。

修改后的完整代码 #

;(function($, win) {
  $.fn.inViewport = function(cb) {
    return this.each(function(i,el){
      function visPx(){
        var H = $(this).height(),
            r = el.getBoundingClientRect(),
            t=r.top,
            b=r.bottom;
        // 给回调多传一个元素索引参数，方便计算延迟
        return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)), i);
      }
      visPx();
      $(win).on("resize scroll", visPx);
    });
  };
}(jQuery, window));

// 基础延迟时间，单位毫秒，可根据动画节奏调整
const baseDelay = 300;

$(".statement-block").inViewport(function(px, index){
  // 只有元素进入视口且未添加过play类时，才触发延迟添加操作
  if(px && !$(this).hasClass("play")) {
    // 延迟时间 = 元素索引 × 基础延迟
    setTimeout(() => {
      $(this).addClass("play");
    }, index * baseDelay);
  }
});

关键细节解释 #

• 我给inViewport插件的回调函数新增了index参数（元素在集合里的顺序，从0开始计数），用来给每个元素分配专属的延迟时长。
• baseDelay是可自定义的变量，你可以根据想要的动画节奏调整数值，数值越大，元素之间的淡入间隔就越长。
• 加了!$(this).hasClass("play")的判断，确保每个元素只会触发一次定时器，不会因为滚动操作反复执行添加类的逻辑。

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