jQuery로 요소 위치 애니메이션하기

Question

편집하려는 슬라이드 쇼가 있습니다.

JS

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

HTML

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

나는 기본적으로 0의 translate X 값을 가지고 events라는 이름의 요소가, 내가 하나가 추가하는 함수를 작성하고자하거나 현재 translate X 값에서 100 픽셀을 제거합니다.

위의 코드는 100을 더하거나 현재 값의 요소가 아닌 0에서 100을 제거합니다.

의미가 있습니까?

Answer 1

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