如何讓jQuery順利滾動到不斷變化的位置？

Question

我試圖製作一個圖像滑塊，從this site中獲取靈感。

我已經得到它的工作，但我無法弄清楚如何使它在位置之間平滑滑動;如果我只是使用jQuery .animate（），那麼它會隨機抽搐，可能試圖與排隊的X位置一起追趕。

如何在滑塊上的點之間平滑地滑動？

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

Answer 1

要做到這一點是添加position: relative;以最簡單的方式圖像，並用$(this).children().stop().animate({ left: (-1*scrollX) + 'px' }, 600, 'swing');

替換scrollLeft（）您也必須刪除瀏覽器滾動條，但通過在父div上設置overflow: hidden;應該很容易。

http://jsfiddle.net/ENhwT/41/

Answer 2

使用Flex滑塊平滑滾動。在柔性滑塊的功能中添加move:1。

<script type="text/javascript"> 
$(function(){ 
    SyntaxHighlighter.all(); 
}); 

$(window).load(function(){ 
    $('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: true, 
    itemWidth: 210, 
    itemMargin: 5, 
    minItems: 5, 
    smoothHeight: false, 
    move:1, 
    start: function(slider){ 
     $('body').removeClass('loading'); 
    } 
    }); 
});