div滚动与jquery动画不平滑

时间:2011-12-20 09:10:59

标签: jquery animation scroll

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

3 个答案:

答案 0 :(得分:4)

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

  • 其次,使用linear缓动来删除动画中的任何堆栈:

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

Demo

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

目标是在悬停时连续滚动吗? 使用与动画时间相同的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();
            })();