jquery - 使用 jQuery 在间隔上复合 CSS 转换

标签 jquery css css-animations

我有一个非常简单的间隔计时器,每 2000 毫秒向一段文本添加一个转换:

setInterval(function(){
$("p").css({"-webkit-transform": "translate3d(0, -60px, 0)", "transform": "translate3d(0, -60px, 0)"});
}, 2000);

我希望在每次迭代时将转换值复合到元素上(-60px、-120px、-180px)...

如何在不创建多个类的情况下以最简单的方式实现这一目标?

最佳答案

如果我没理解错的话,你想每 2 秒减去 60px。 你可以这样做:

var px = 0
setInterval(function(){
  px = px - 60;
  $("p").css({
    "transform": "translate3d(0px," + px + "px, 0px)"
  });
}, 2000);

这是在每 2 秒从变量 px 中减去 60。

只需更改数字即可更改数量或间隔。

关于jquery - 使用 jQuery 在间隔上复合 CSS 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48564966/

相关文章:

javascript - 在大型网站上管理 document.ready 事件

css - 两个带边框的全屏 float

css - 应用动画未在 IE 11 中运行

jquery - 响应 Metro-UI-CSS

javascript - Bootstrap - 模态有时会中断滚动

jquery - 如何使用溢出滚动显示更多/显示更少?

jquery - 如何设置一个单选按钮应该始终处于事件状态

html - 从左到右的 CSS3 动画从中心开始

javascript - 如何使用导航按钮从服务器加载 div 中的图像?

jquery - 在没有动画中断的情况下居中多个 Slick Slides