网页滚动过渡效果JavaScript代码故障：仅首个区块正常显示

我有一段用于网页动画的JavaScript代码，原本期望滚动到触发点时，4个图文区块依次过渡显示。代码为了实现平滑的0到1透明度淡入、避免初始闪烁，用了void element.offsetWidth处理重绘，但现在只有第一个区块能正常显示，剩下三个完全不出现。

原代码如下：

$(document).ready(function() {
  var reapplyAnimation = function(element, animationClass) {

    void element.offsetWidth;

    $(element).addClass(animationClass);
  };

  $('.blob').each(function() {
    var blobElement = this;
    var animated = false;
    var section = $(blobElement).closest('.custom-image-text-section');
    $(section).addClass('hidden-on-load');
    
    new Waypoint({
      element: blobElement,
      handler: function(direction) {
        if (direction == 'down' && !animated) {
          
          $(section).removeClass('hidden-on-load');
          reapplyAnimation(blobElement, 'animated-fade-rotate');
          
          var relatedImage = $(blobElement).closest('.custom-image-text-section').find('.image-container img')[0];
          $(section).removeClass('hidden-on-load');
          reapplyAnimation(relatedImage, 'animated-slide-rotate');

          var textContainer = $(blobElement).closest('.custom-image-text-section').find('#text-container')[0];
          $(section).removeClass('hidden-on-load');
          reapplyAnimation(textContainer, 'animated-fade-in-slide-in-right');

          animated = true;
          this.destroy();
        }
      },
      offset: '45%' // Trigger point
    });
  });
});

问题根源 #

• ID选择器重复使用：HTML规范里ID必须是唯一的，但代码中用#text-container查找文本容器，如果4个区块都用了同一个id="text-container"，find('#text-container')只会返回第一个匹配元素，后续区块的文本容器无法被选中添加动画类，再加上初始的hidden-on-load类，就会一直隐藏。
• 冗余代码：多次调用$(section).removeClass('hidden-on-load')属于无效重复操作，虽不影响核心功能，但没必要保留。

修复步骤 #

1. 修正HTML中的ID为类选择器 #

把所有区块里的id="text-container"改成class="text-container"，确保每个区块的文本容器都能被正确选中。

2. 修改JavaScript中的选择器 #

将代码里的find('#text-container')替换为find('.text-container')：

var textContainer = $(blobElement).closest('.custom-image-text-section').find('.text-container')[0];

3. 优化冗余代码（可选） #

把重复的$(section).removeClass('hidden-on-load')只保留一次，放在动画触发的开头：

if (direction == 'down' && !animated) {
  $(section).removeClass('hidden-on-load'); // 仅执行一次
  reapplyAnimation(blobElement, 'animated-fade-rotate');
  
  var relatedImage = $(blobElement).closest('.custom-image-text-section').find('.image-container img')[0];
  reapplyAnimation(relatedImage, 'animated-slide-rotate');

  var textContainer = $(blobElement).closest('.custom-image-text-section').find('.text-container')[0];
  reapplyAnimation(textContainer, 'animated-fade-in-slide-in-right');

  animated = true;
  this.destroy();
}

完整修复后的代码 #

$(document).ready(function() {
  var reapplyAnimation = function(element, animationClass) {
    void element.offsetWidth;
    $(element).addClass(animationClass);
  };

  $('.blob').each(function() {
    var blobElement = this;
    var animated = false;
    var section = $(blobElement).closest('.custom-image-text-section');
    $(section).addClass('hidden-on-load');
    
    new Waypoint({
      element: blobElement,
      handler: function(direction) {
        if (direction == 'down' && !animated) {
          $(section).removeClass('hidden-on-load');
          
          reapplyAnimation(blobElement, 'animated-fade-rotate');
          
          var relatedImage = $(blobElement).closest('.custom-image-text-section').find('.image-container img')[0];
          reapplyAnimation(relatedImage, 'animated-slide-rotate');

          var textContainer = $(blobElement).closest('.custom-image-text-section').find('.text-container')[0];
          reapplyAnimation(textContainer, 'animated-fade-in-slide-in-right');

          animated = true;
          this.destroy();
        }
      },
      offset: '45%' // Trigger point
    });
  });
});

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