如何用jQuery实现CSS transform属性值的叠加式定时更新？

嘿，这个需求其实超级好解决，不用搞什么多类名或者复杂计算，只需要一个变量来追踪当前的偏移量就行！

核心思路就是在定时器外部定义一个变量，用来记录当前已经偏移的Y轴数值，每次定时器触发时就让这个数值叠加（这里是每次减60，因为是向上偏移），然后把更新后的数值应用到transform属性里。

直接上完整代码：

// 初始化当前Y轴偏移量，从0开始
let currentYOffset = 0;

// 每2000ms执行一次偏移更新
setInterval(function() {
  // 每次叠加-60px的偏移
  currentYOffset -= 60;
  
  // 给p元素应用最新的transform变换，兼容webkit前缀
  $("p").css({
    "-webkit-transform": `translate3d(0, ${currentYOffset}px, 0)`,
    "transform": `translate3d(0, ${currentYOffset}px, 0)`
  });
}, 2000);

为什么这样可行？ #

• currentYOffset变量会在每次定时器回调中被更新，每次减去60，所以偏移量会依次变成-60px、-120px、-180px……完全符合你的需求。
• 全程不需要创建任何额外的CSS类，所有逻辑都在JS里完成，简洁又直接。

小补充 #

如果之后需要停止这个定时器，可以把setInterval的返回值存起来，比如：

const offsetTimer = setInterval(function() {
  // 同上的逻辑
}, 2000);

// 想要停止时调用
// clearInterval(offsetTimer);

这样能避免不必要的内存泄漏哦～

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