使用jQuery动画元素位置

时间:2016-06-02 12:29:54

标签: javascript jquery html css

我正在尝试编辑幻灯片。

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。 / p>

我上面写的代码增加了100,或者从0中取走了100,而不是从元素当前值中删除。

这有意义吗?

1 个答案:

答案 0 :(得分:0)

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

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

首先,引用您想要操作的元素:

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

然后,使用replace提取它的当前translateX值,除去实际数值之外的所有内容。

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