Animieren Elementposition mit jQuery

Question

Ich habe eine Diashow im Versuch zu bearbeiten.

JS

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

HTML

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

Ich habe ein Element events genannt, die einen translate X Wert von 0 hat standardmäßig, ich möchte eine Funktion schreiben, dass entweder ergänzt oder entfernt 100px von seinem aktuellen Wert translate X.

Der Code, den ich oben geschrieben habe, addiert 100, oder nimmt 100 von 0 weg, nicht vom aktuellen Wert des Elements.

Macht das Sinn?

Answer 1

Bitte lesen Sie in diesem JSBin: http://jsbin.com/qayedelubi/edit?html,console,output

Die Hauptidee ist es, den aktuellen Wert zu extrahieren, 100, um es und es dann auf das Element gesetzt.

Zunächst verweisen Sie das Element bearbeiten möchten:

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

Dann entpacken Sie es aktuelle translateX Wert ist, replace mit alles, aber die tatsächlichen numerischen Wert strippen.

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