如何让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'); 
    } 
    }); 
});