Question

我尝试使用var yAxis = 20; setInterval(function() { $('.sentence').css('transform', 'matrix(1, 0, 0, 1, 0,' + yAxis + ')'); }, 3000);每隔3秒在y轴上移动一个20px的句子。我的代码只会移动句子一次。发生了什么事？

{{1}}

fiddle

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

3 个答案: