Javascript 每3秒以setInterval将句子移动20像素

我试图通过使用

setInterval（）

在y轴上每3秒移动一个句子20px。我的代码只会移动句子一次。发生什么事了

var yAxis = 20;

setInterval(function() {
    $('.sentence').css('transform', 'matrix(1, 0, 0, 1, 0,' + yAxis + ')');
 }, 3000);

您可以使用

offset（）

方法从左侧和顶部获取当前元素的偏移量。首先，从顶部获取当前偏移量，然后用新值覆盖它，在本例中，新值为“oldOffset+20px”。以下是工作示例：

setInterval（函数（）{
变量el=$（“.句子”）；
var currentOffset=el.offset（）；
el.offset（{top:currentOffset.top+20，left:currentOffset.left}）
}, 3000);

Text
您给出的CSS指令始终相同-将
语句从其原始位置转换为更低的20点

使用：

相反
您的变换不会向现有Y添加20。它只是将Y设置为20。您需要存储上一次转换的状态，然后在将该值应用于下一次转换之前更新该值


设yAxis=0；
setInterval（函数（）{
yAxis+=20；
$（'.句子'）.css（'transform'，'matrix（1,0,0,1,0'，+yAxis+'））；
}, 500);

这是一个句子。
接近我想要的，但第一个动画现在似乎是40px，而不是20。在移动40px后，它沿y轴重复20px。首先将yAxis设置为0-我忘记了+=是预增量！完美的我学到了一些东西。你知道如何使用JavaScript调试器吗？如果没有，那就是学习的时候了：这里有一个例子。在
setInterval
内的代码行上设置一个断点，每次查看
yAxis
的值。值是变化了还是保持不变？
var yAxis=0;
setInterval(function() {
$('.sentence').css('transform', 'matrix(1, 0, 0, 1, 0,' + (yAxis+=20) + ')'); }, 3000);