如何为现有jQuery页面预加载器添加数字计数动画与上移过渡？

1. 搭建预加载器HTML结构 #

在预加载器容器内添加数字显示元素，用于承载计数动画：

<div id="preloader">
  <div class="loader-content">
    <span id="loader-count">0</span>%
  </div>
</div>

2. 编写CSS样式（包含上移过渡） #

设置预加载器全屏布局，定义上移过渡效果，可根据作品集风格自定义配色和尺寸：

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1a1a1a; /* 替换为你的主题色 */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 顺滑过渡曲线 */
  z-index: 9999; /* 确保在页面最上层 */
}

/* 触发上移过渡的类 */
#preloader.preloader-up {
  transform: translateY(-100%);
}

.loader-content {
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 2px;
}

3. 整合jQuery代码（计数+原有淡出逻辑） #

修改原有预加载器代码，加入数字计数动画，结合上移过渡和淡出效果：

$(window).on('load', () => {
  // 数字从0到100的计数动画
  function runCountAnimation() {
    let currentCount = 0;
    const countTimer = setInterval(() => {
      if (currentCount >= 100) {
        clearInterval(countTimer);
        // 计数完成后先触发上移，再执行淡出移除
        $('#preloader').addClass('preloader-up');
        setTimeout(() => {
          $('#preloader').fadeOut(800, function() {
            $(this).remove();
          });
        }, 700); // 时间与CSS过渡时长匹配，保证动画连贯
      } else {
        currentCount += 1;
        $('#loader-count').text(currentCount);
      }
    }, 16); // 调整此值控制计数速度，数值越小越快
  }

  // 启动计数动画
  runCountAnimation();
});

关键调整说明 #

• 计数动画通过setInterval实现数值递增，实时更新页面数字显示
• 上移效果依赖CSS的transition和transform，通过添加类触发，避免硬编码样式
• 调整淡出触发时机，等上移动画接近完成时再执行淡出，让整体过渡更流畅
• 所有时间参数（计数速度、过渡时长、延迟时间）可根据作品集风格自行调整

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