用jQuery动画元素位置

Question

I have a slideshow im trying to edit.

JS

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

HTML

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

I have an element named events that has a translate X value of 0 by default, I want to write a function that either adds or removes 100px from its current translate X value.

the code I have written above adds 100, or takes away 100 from 0, not from the elements current value.

Does this make sense?

Answer 1

Please check out this JSBin: http://jsbin.com/qayedelubi/edit?html,console,output

The main idea is to extract the current value, add 100 to it and then set it to the element.

First, reference the element you want to manipulate:

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

Then, extract it's current translateX value, using replace to strip everything but the actual numeric value.

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