slider - How do I make jQuery smoothly scroll to a constantly-changing position? -

i'm trying make image slider, drawing inspiration this site.

i've gotten working, can't figure out how make smoothly slide between positions; if use jquery .animate(), jerks around randomly, presumably trying play catch-up queued x positions.

how smoothly slide between points on slider?

jsfiddle version

html:

<div id="slider">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80">     <img src="http://placekitten.com/100/80"> </div> 

css:

#slider{     width: 550px;     height:134px;     overflow-x: scroll;     overflow-y: hidden;     white-space: nowrap; } #slider img {     border: 1px solid #282828;     margin: 16px 6px 16px 10px;     padding:0; } #slider img:hover{     border: 1px solid #eee; } 

jquery:

$("#slider").mousemove(function(e) {     var sidepadding = 50;     var parentoffset = $(this).offset();      var relx = e.pagex - parentoffset.left;     var scrollx = ((relx - sidepadding)  / ($(this).width() + sidepadding)) * ($(this).prop('scrollwidth'));      $(this).scrollleft(scrollx); }); 

the easiest way add position: relative;to images, , replace scrollleft() $(this).children().stop().animate({ left: (-1*scrollx) + 'px' }, 600, 'swing');

you'd have remove browser scrollbar too, should easy setting overflow: hidden; on parent div.

http://jsfiddle.net/enhwt/41/