使用jQuery的动画元素位置

Question

我有一个幻灯片我想编辑。

JS

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

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

我有一个名为events的元素，默认情况下它的translate X值为0，我希望编写一个函数，该函数可以从当前的translate X值中添加或删除100 an。

我上面所写的代码添加了100，或者从0中删除了100，而不是从元素当前值中删除。

这有道理吗？

Answer 1

请查看这个JSBin：http://jsbin.com/qayedelubi/edit?html,console,output

其主要思想是提取当前值，向其添加100，然后将其设置为元素。

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

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

然后，提取它的当前translateX值，使用replace删除除实际数值以外的所有内容。

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