javascript - Scroll left / right an image with animation -

please take @ demo.

by using code this post i've managed make image move horizontally clicking left or right links.

what i'd achieve make image jumps smoother somehow.

here's code:

<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> 

i tried use animate function, no success:

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

i'm testing on ie 10 on windows 8 on touchscreen desktop, has work on swipe / tap events too.

any appreciated!

demo

you need animate scrollleft property of jquery object scroller, , not htmlobject scroller, because it's former has method animate.

var scrolldiv = function (dir, px) {     var scroller = document.getelementbyid('scroller'), // htmlobject         go;   // holds '+=' or '-='      if (dir == 'l') go = '-=';      else go = '+=';     // no need else-if here      // `$(htmlobject)` ---> `jquery object`     $(scroller).animate({         scrollleft: go + px  // becomes '-=int' or '+=int'      }, 500); // duration }