Question

我在http://jsfiddle.net/ULeuu/1/中提出了我的示例工作代码。问题是我试图使用jquery动画但滚动不顺畅。有没有办法让我能让div顺利滚动

Answer 1

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

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

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

Demo

Answer 2

而不是fast在.animate中提供一些值

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

Answer 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();
            })();

div滚动与jquery动画不平滑

3 个答案: