使用setInterval每3秒移动一个句子20px

Question

我试图通过使用 setInterval() 简单地每 20 秒在 y 轴上移动一个句子 3px。我的代码只会移动句子一次。这是怎么回事？

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

小提琴

Answer 1

您可以使用

offset()方法从左侧和顶部获取当前元素的偏移量。首先，从顶部获取当前偏移量，然后用新值覆盖它，在您的情况下，该值将是"oldOffset + 20px"。这是工作示例：

setInterval(function() {
    var el = $('.sentence');
    var currentOffset = el.offset();
    el.offset({ top: currentOffset.top + 20, left: currentOffset.left})
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="sentence">Text Text Text</p>

Answer 2

你给出的 CSS 指令总是相同的 - 将.sentence从其原始位置转换为低 20 点。

用：

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

相反

Answer 3

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

let yAxis = 0;
setInterval(function() {
  yAxis += 20;
  $('.sentence').css('transform', 'matrix(1, 0, 0, 1, 0,' + yAxis + ')');	
}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sentence">This is a sentence.</div>