基于jQuery实现数组文本滚动切换动画的技术求助

你现有的代码只是直接替换文本内容，没有过渡动画，咱们可以通过CSS过渡+JS逻辑配合，实现上下滚动加淡入淡出的效果，和Flexpool的表现一致。

完整实现代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 新增容器限制高度，实现滚动溢出隐藏 -->
<div class="text-scroller">
  <span class="text-item active">One</span>
</div>

CSS #

.text-scroller {
  position: relative;
  /* 适配你的文本行高，确保只显示一行 */
  height: 1.2em;
  overflow: hidden;
}

.text-item {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  /* 默认隐藏在容器下方 */
  opacity: 0;
  transform: translateY(100%);
  /* 定义过渡动画的时长和曲线 */
  transition: all 0.5s ease-in-out;
}

.text-item.active {
  /* 激活状态：显示在原位 */
  opacity: 1;
  transform: translateY(0);
}

.text-item.out {
  /* 退出状态：向上移出容器并消失 */
  opacity: 0;
  transform: translateY(-100%);
}

JavaScript #

var texts = ["One", "Two", "Three", "etc"];
var point = 0;

function changeText() {
  var $currentText = $('.text-item.active');
  // 创建新的文本元素
  var $newText = $('<span class="text-item">' + texts[point] + '</span>');
  
  // 把新元素添加到容器里
  $('.text-scroller').append($newText);
  
  // 给当前显示的文本添加退出动画类
  $currentText.addClass('out');
  
  // 等退出动画完成（和CSS过渡时长一致），移除旧元素并激活新元素
  setTimeout(() => {
    $currentText.remove();
    $newText.addClass('active');
  }, 500);
  
  // 循环切换文本索引
  point = (point + 1) % texts.length;
  // 总间隔=动画时长+文本停留时间，这里保持你原来的2100ms
  setTimeout(changeText, 2100);
}

// 初始化后等待2100ms开始第一次切换
setTimeout(changeText, 2100);

关键逻辑说明 #

1. 容器作用：text-scroller的overflow: hidden确保文本滚动时超出部分被隐藏，固定高度保证只显示一行文本。
2. CSS过渡：通过transform控制文本的上下位移，opacity控制透明度，结合transition实现平滑过渡。
3. JS控制流程：每次切换时先创建新文本，触发旧文本的退出动画，动画结束后清理旧元素并激活新元素，避免DOM元素堆积。

如果想要更贴近Flexpool的细节，比如调整动画速度、位移距离，直接修改CSS里的transition时长或者translateY数值就行。

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