Анимация позиции элемента с 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 по умолчанию, я хочу, чтобы написать функцию, которая либо добавляет или удаляет 100px с текущего значения translate X.

код, который я написал выше, добавляет 100 или убирает 100 из 0, а не из текущего значения элементов.

Имеет ли это смысл?

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)';