本文详解 jquery + css 实现平滑 marquee 动画的关键优化点，重点解决因 `inline-block` 元素默认空白间隙导致的视觉抖动问题，并提供可直接复用的修复方案。
在 Web 开发中，顶部滚动横幅（Marquee）常用于实时行情、公告或新闻轮播等场景，其第一印象至关重要——用户期望看到的是无缝、匀速、无卡顿的连续动画。然而，你当前基于 jQuery.animate() 与 requestAnimationFrame 混合驱动的实现，在 Chrome/macOS 下每 5 秒出现轻微“抖动”，根本原因并非 JavaScript 性能瓶颈，而是CSS 渲染层面的隐藏陷阱。
? 问题根源：inline-block 的不可见空隙
当
✅ 终极解决方案：消除 inline-block 间隙
只需两行 CSS 即可根治：
ul.slideContainer {
font-size: 0; /* 消除子元素间的空白字符渲染 */
}
ul.slideContainer li {
font-size: 16px; /* 恢复文字正常大小 */
}? 原理：将父容器 ul 的 font-size 设为 0，使空格字符失去渲染尺寸；再为 li 显式设置所需字号，确保文本内容清晰可读。
? 完整优化建议（含代码增强）
除了核心 CSS 修复，以下实践可进一步提升动画质量：
- 避免 animate() + requestAnimationFrame 混用：jQuery.animate() 基于 setTimeout，与 rAF 时间基准不一致，易引发帧率冲突。推荐统一使用 rAF 驱动 transform 动画（更高效、更顺滑）；
- 启用硬件加速：为 .slideContainer 添加 will-change: transform 或 transform: translateZ(0)，触发 GPU 渲染；
- 修正 JS 逻辑：原代码中 currencyPairWidth 在动画开始前静态计算，若窗口缩放或字体加载延迟可能导致宽度偏差。建议在 rAF 循环中动态读取，或使用 getBoundingClientRect() 确保精度。
优化后的精简版示例（CSS + JS）：
.slider {
width: 100%;
overflow: hidden;
position: relative;
}
.slideContainer {
display: flex; /* 可选：Flex 替代 inline-block，彻底规避空隙 */
width: max-content;
will-change: transform;
}
.slideContainer li {
list-style: none;
white-space: nowrap;
}
/* 关键修复 */
.slideContainer {
font-size: 0;
}
.slideContainer li {
font-size: 16px;
}let offset = 0;
const container = $('.slideContainer')[0];
const firstItem = $('.slideItem:first')[0];
const itemWidth = firstItem.getBoundingClientRect().width;
function animateMarquee() {
offset -= 0.5; // 像素级匀速控制（可调）
container.style.transform = `translateX(${offset}px)`;
// 无缝循环：当位移超过单个 item 宽度时重置
if (offset <= -itemWidth) {
offset = 0;
// 将首个元素移至末尾（DOM 操作需谨慎，建议预生成双倍内容）
container.appendChild(firstItem);
}
requestAnimationFrame(animateMarquee);
}
requestAnimationFrame(animateMarquee);✅ 总结
Marquee 动画不流畅，90% 源于 CSS 布局细节而非 JS 性能。牢记三点：
- inline-block 间隙是隐形杀手 → 用 font-size: 0 父容器 + 子元素重置字号；
- 优先使用 transform 而非 margin 动画 → 利用 GPU 加速，避免重排（reflow）；
- 确保 DOM 尺寸计算时机准确 → 避免静态缓存宽度，必要时监听 resize 或使用 ResizeObserver。
修复后，你的顶部滚动栏将在所有现代浏览器中呈现影院级丝滑效果——从第一帧开始，始终如一。
