왼쪽/오른쪽으로 애니메이션으로 이미지 스크롤

Question

이 부분을 보시려면 DEMO을보십시오.

this post의 코드를 사용하면 왼쪽 또는 오른쪽 링크를 클릭하여 이미지를 가로로 움직일 수 있습니다.

내가 달성하고 싶은 것은 어떻게 든 이미지가 더 부드럽게 점프하게 만드는 것입니다. 그래서,

var scrollDiv = function(dir, px) { 
    var scroller = document.getElementById('scroller'); 
    if (dir == 'l'){ 
     scroller.animate({ scrollLeft: '-= px' }, 1000); 
    } 
    else if (dir == 'r'){ 
     scroller.animate({ scrollLeft: '+= px' }, 1000); 
    } 
} 

나는 터치 스크린 바탕 화면에 윈도우 8에서 IE 10에서 테스트 해요 : 여기

내 코드입니다 :

<script> 
    var scrollDiv = function(dir, px) { 
     var scroller = document.getElementById('scroller'); 
     if (dir == 'l'){ 
      scroller.scrollLeft -= px; 
     } 
     else if (dir == 'r'){ 
      scroller.scrollLeft += px; 
     } 
    } 
</script> 

<a class="tArrowL" href="javascript: void(0);" onclick="scrollDiv('l', 80); return false;">« left</a> 
<a class="tArrowR" href="javascript: void(0);" onclick="scrollDiv('r', 80); return false;">right »</a> 
<div class="wrapOut"> 
    <div id="scroller" class="wrapIn"> 
     <img id="" src="http://lorempixel.com/output/nature-q-c-1044-480-2.jpg" /> 
    </div> 
</div> 

내가 animate 기능을 사용하려고했으나 성공하지 스 와이프/탭 이벤트에서도 작동해야합니다.

도움이 될 것입니다. 이 방법 animate이있는 전이기 때문에

Answer 1

DEMO

당신은 아닌 HTMLObject scroller의 jQuery 객체 scroller의 scrollLeft 속성에 애니메이션 필요합니다.

var scrollDiv = function (dir, px) { 
    var scroller = document.getElementById('scroller'), // HTMLObject 
     go; // holds '+=' or '-=' 

    if (dir == 'l') go = '-='; 
    else go = '+=';  // no need for else-if here 

    // `$(HTMLObject)` ---> `jQuery Object` 
    $(scroller).animate({ 
     scrollLeft: go + px // becomes '-=int' or '+=int' 
    }, 500); // duration 
}