如何让 jQuery 平滑滚动到不断变化的位置？答案

【问题标题】：How do I make jQuery smoothly scroll to a constantly-changing position?如何让 jQuery 平滑滚动到不断变化的位置？
【发布时间】：2013-05-14 03:01:02
【问题描述】：

我正在尝试制作一个图像滑块，灵感来自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);
});

【问题讨论】：

标签： jquery slider jquery-animate

【解决方案1】：

最简单的方法是将position: relative;添加到图像中，并将scrollLeft()替换为$(this).children().stop().animate({ left: (-1*scrollX) + 'px' }, 600, 'swing');

您还必须删除浏览器滚动条，但通过在父 div 上设置 overflow: hidden; 应该很容易。

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

【讨论】：

【解决方案2】：

使用 flex 滑块滚动更流畅。在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');
    }
  });
});

【讨论】：