用jQuery動畫元素位置

Question

我正在嘗試編輯幻燈片。

JS

value = 100;
value = value++;
setTransformValue(eventsWrapper, 'translateX', value+'px'); 

的HTML

<div class="events" style="width: 4000px; transform: translateX(0px);">

我有一個名為events的元素，默認情況下其translate X值為0，我想編寫一個函數，該函數可以從當前translate X值中添加或刪除100px。

我在上面編寫的代碼將100加或從0（而不是元素當前值）中減去100。

這有意義嗎？

Answer 1

請查看以下JSBin： http ://jsbin.com/qayedelubi/edit?html，控制台，輸出

主要思想是提取當前值，將其添加100，然后將其設置為元素。

首先，引用您要操作的元素：

var events = document.querySelector('div.events');

然后，提取它的當前translationX值，並使用replace去除除實際數值之外的所有內容。

var translateX = parseInt(events.style.transform.replace('translateX(', '').replace('px)', ''), 10);
events.style.transform = 'translateX(' + (translateX + 100) + 'px)';