setIntervalで文章を3秒ごとに移動する

Question

setInterval()を使用して、3秒ごとにy軸上の文章20pxを単純に移動しようとしています。私のコードは文章を1回だけ動かします。どうしたの？

var yAxis = 20; 

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

fiddle

Answer 1

あなたが与えるCSSディレクティブは常に同じです - 下20pointsに元の位置から.sentenceを変換します。

用途：

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

代わり

Answer 2

あなたは左と上からから現在の要素のオフセットを取得するoffset()メソッドを使用することができます。まず、topから現在のオフセットを取得し、新しい値で上書きします。これは、あなたのケースでは "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 3

あなたのあなたは、その更新前の変換の状態を保存する必要がある20にそれは単純にYを設定し、既存のYに20を追加しません変換次の変換に適用する前に値を戻します。

let yAxis = 0; 
 

 
setInterval(function() { 
 
    yAxis += 20; 
 
    $('.sentence').css('transform', 'matrix(1, 0, 0, 1, 0,' + yAxis + ')'); \t 
 
}, 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>