从鼠标悬停平滑 JQuery 滚动动画

Question

我有一个 JQuery 滚动动画（源自 this answer 到一个几乎完全满足我需求的问题），并且它正在工作。当用户将鼠标悬停在一行的边缘时，我试图获得图标的横向滚动，有点像 Netflix 如何使用不同的电影海报组织其浏览器主页。

但就像评论者一样，我的动画有些非常缓慢、难看的波涛汹涌。具体来说，当鼠标悬停在边缘开始动画时，它非常不稳定，但是当鼠标完全离开div 时，动画就会变得平滑。但是，将鼠标放回该区域，它又会变得不稳定。

这是我的代码，对上面的答案做了一些改动...

$(".scroller").mousemove(function(e){
    var h = $('#innerscroller').width()+13;
    var offset = $($(this)).offset();
    var position = (e.pageX-offset.left)/$(this).width();

    if(position < 0.10) {
        $(this).stop().animate({ scrollLeft: 0 }, 5000);
        $(".status").html('Percentage1:' + position.toFixed(2) + ' lefting');
    }
    else if(position > 0.90) {
        $(this).stop().animate({ scrollLeft: h }, 5000);
        $(".status").html('Percentage3:' + position.toFixed(2) + ' righting');
    } else {
        $(this).stop();
        $(".status").html('Percentage2:' + position.toFixed(2));
    }
});

还有 HTML...

<div class="scroller" style="width:680px; overflow-x:auto; overflow:hidden; white-space:nowrap; background-color:blue">
    <div id="innerscroller" style="width:auto;">
        // Row of icons here.
    </div>
</div>

我是一个 JQuery 菜鸟，这只是我第二次接触它。有人可以告诉我如何使动画平滑，使它成为一个优雅的侧边滚动条吗？

对于奖励积分，我希望它在鼠标离开 scroller div 时完全停止，这样当他们在屏幕上移动鼠标时它们最终不会滚动十行。

更新：我注意到了一点线索，任何可以诊断问题的人：只要我的鼠标在移动，它就会正常滚动。如果我将鼠标保持在悬停区域内并四处移动，它会完美滚动。只有当我的鼠标停止时，它才会开始缓慢地移动。有什么想法吗？

更新 2：我创建了一个 fiddle link 来说明我正在经历的事情。将鼠标悬停在该区域上确实会开始滚动，但是您必须将鼠标悬停在该区域上，然后将鼠标移开才能使它变得不波涛汹涌和尴尬。有什么想法吗？

Answer 1

我认为你应该试试 jQuery Easing 插件 - http://gsgd.co.uk/sandbox/jquery/easing/

包含文件并选择您喜欢的任何缓动类型。