带有jquery动画的div滚动不流畅答案

【问题标题】：div scroll with jquery animate not smooth带有jquery动画的div滚动不流畅
【发布时间】：2011-12-20 09:10:59
【问题描述】：

我已将示例工作代码放在 http://jsfiddle.net/ULeuu/1/ 中。问题是我正在尝试使用 jquery 制作动画，但滚动不流畅。有没有办法让我可以让 div 平滑滚动

【问题讨论】：

你能详细说明一下吗？您使用的是哪个浏览器？什么版本的 jquery？
我认为他的意思是如果鼠标按住next，它应该连续滚动而不是滚动和停止，滚动和停止等。
@ShantanuD 我想要 Purmou 指出的方式
@Purmou 是的，Purmou 你说得对。有没有更好的方法来摆脱我面临的问题。我想让速度持续时间灵活，但在我的演示代码中下一次鼠标按下时的滚动和停止问题是进一步进行的主要问题

【解决方案1】：

首先，通过将动画持续时间设置为400 来同步您的setTimeout 和.animate() 的持续时间，例如超时。

其次，使用linear easing 来移除动画中的任何堆栈：

$("#slide").stop().animate({"left":leftVal + 177  + 'px'}, { "duration": 400, "easing": "linear" });

Demo.

【讨论】：

我已经看到您所做的更正，但在滚动过程中出现了某种视觉失真。我已经尝试过了，但没有得到滚动插件如何工作的效果。是否可以将其与视觉清晰度一起制作平滑，否则在触摸设备中轻微的视觉差异会更加明显。

【解决方案2】：

fast 的 Insted 在 .animate 中提供一些价值，例如

 $("#slide").stop().animate({"left":leftVal + 177  + 'px'},1000);

【讨论】：

这只会让它变慢。如果您注意到，动画在中途有一个非常短暂的停顿。这就是他想要摆脱的。
@Ajinkya 我已经尝试过了，但无法摆脱 Purmou 提到的内容

【解决方案3】：

目标是在悬停时连续滚动吗？
使用与动画时间相同的 setInterval，并使用线性缓动。
- 使用 jQuery 1.9.1

(function(){
                var myObject = {
                    leftInt: '',
                    rightInt: '',
                    init: function(){
                        $this = this;
                        $(function(){
                            $this.eventListeners();
                        });
                    },
                    eventListeners: function(){
                        $('#prev').on("mouseenter", myObject.goLeft);
                        $('#prev').on("mouseleave", myObject.stopLeft);
                        $('#next').on("mouseenter", myObject.goRight);
                        $('#next').on("mouseleave", myObject.stopRight);
                    },
                    goLeft: function(){
                        myObject.leftInt = setInterval(myObject.slideLeft, 300);
                    },
                    goRight: function(){
                        myObject.rightInt = setInterval(myObject.slideRight, 300);
                    },
                    stopLeft: function(){
                        clearInterval(myObject.leftInt);
                    },
                    stopRight: function(){
                        clearInterval(myObject.rightInt);
                    },
                    slideLeft: function(){
                        $("#slide").stop(true, true).animate({"left":'+=20px'}, 300, 'linear');
                    },
                    slideRight: function(){
                        $("#slide").stop(true, true).animate({"left":'-=20px'}, 300, 'linear');
                    }
                }
                myObject.init();
            })();

【讨论】：