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 noob，这是我第二次触及它。有人能告诉我如何平滑动画，这是一个很好的优雅滚动到一边吗？

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

更新：我注意到了一些线索，对于任何可以诊断问题的人来说：只要我的鼠标移动，它就会正常滚动。如果我将鼠标放在悬停区域内并只是移动它，它会完美滚动。只有当我的鼠标停止时，它才开始慢慢地突然出现。有什么想法吗？

更新2：我已经fiddle link来说明我遇到的情况。将鼠标悬停在该区域上会开始滚动，但是您必须将鼠标悬停在该区域上方，然后将鼠标移开以使其变得不稳定和笨拙。有什么想法吗？

Answer 1

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

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

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

1 个答案: