jQuery结合jquery.visible实现元素可见时独立控制动画的问题

你当前的代码有两个核心逻辑错误，导致无法实现独立控制效果：

• $('.element').visible(true) 写法只会检测jQuery选择器匹配到的第一个.element元素的可见状态，不会对所有匹配元素做逐一判断
• scroll事件的回调里this指向的是绑定事件的document对象，$('.element', this)会直接选中页面上所有.element元素，自然会批量修改所有元素的状态

核心逻辑是遍历每一个目标元素，单独判断每个元素自身的可见性，再单独设置它的动画状态，不要做批量判断、批量修改。
完整可运行代码如下：

// 页面DOM加载完成后初始化
$(function() {
  // 先把所有目标元素的动画初始设为暂停状态，避免首屏外元素自动播放
  $('.element').css('animationPlayState', 'paused');

  // 滚动事件触发时逐个检测元素状态
  $(window).on('scroll', function() {
    // 遍历每一个匹配的元素
    $('.element').each(function() {
      // 这里的$(this)指代当前遍历到的单个元素
      const $currentEl = $(this);
      // 单独判断当前元素是否在可视区域
      if ($currentEl.visible(true)) {
        // 仅当前元素可见时，播放它的动画
        $currentEl.css('animationPlayState', 'running');
      } else {
        // 不可见时暂停当前元素的动画
        $currentEl.css('animationPlayState', 'paused');
      }
    });
  }).trigger('scroll'); // 页面加载完立即触发一次scroll，处理首屏内的元素自动播放
});

scroll事件触发频率非常高，频繁执行DOM查询和状态修改会占用主线程资源，可以加简单的节流处理，比如滚动停止后100毫秒再执行检测逻辑，减少不必要的计算：

$(function() {
  let scrollTimer = null;
  $('.element').css('animationPlayState', 'paused');

  $(window).on('scroll', function() {
    // 滚动过程中清空之前的定时器
    if (scrollTimer) clearTimeout(scrollTimer);
    // 停止滚动100ms后再执行检测
    scrollTimer = setTimeout(() => {
      $('.element').each(function() {
        const $currentEl = $(this);
        $currentEl.css('animationPlayState', $currentEl.visible(true) ? 'running' : 'paused');
      });
    }, 100);
  }).trigger('scroll');
});

注意：如果你的实际目标元素class是之前原生代码里写的parl，把代码里所有的.element替换成.parl即可正常生效。

内容的提问来源于stack exchange，提问作者Newbie Net Doc