用setInterval移動一個句子20px每3秒

我試圖簡單地通過使用setInterval()每隔3秒在y軸上移動一個20px的句子。我的代碼只會移動一個句子。這是怎麼回事？用setInterval移動一個句子20px每3秒

var yAxis = 20; 

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

fiddle

來源

2017-10-07 brewpixels

你知道如何使用JavaScript調試器？如果沒有，該學習了：這是一個[Chrome DevTools指南]（https://developer.chrome.com/devtools）。在'setInterval'內的代碼行中設置一個斷點，並每次查看'yAxis'的值。價值變化還是保持不變？ –

你給的CSS指令總是相同的 - 從原來的位置變換.sentence到20points低。

用途：

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

代替

來源

2017-10-07 03:17:39

接近我想要的，但第一個動畫現在看起來是40px，而不是20個。移動40px後，它沿y軸重複20px。 – brewpixels

將yAxis設置爲0 - 我忘記了+ =是預先增量！ –

完美。學到了一些東西。謝謝。 – brewpixels

您可以使用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>

來源

2017-10-07 02:58:05

您的轉換不添加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>

來源

2017-10-07 04:08:47 skylize

用setInterval移動一個句子20px每3秒

回答

相關問題