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

Question

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

var yAxis = 20;

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

fiddle

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>