CODEWITHSUNDEEP
jqueryanimationscroll
user850234
user850234

Reputation: 3463

div scroll with jquery animate not smooth

I have put up my sample working code in http://jsfiddle.net/ULeuu/1/ . The problem is i am trying to animate using jquery but the scrolling is not smooth. Is there a way so that i can make div scroll smoothly

Upvotes: 2

Views: 10794

Answers (3)

Jason Lydon
Jason Lydon

Reputation: 7180

Is the goal to have continuous scroll on hover?
Use a setInterval with the same amount of time as your animation, with linear easing.
- using 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();
            })();

Upvotes: 0

Samich
Samich

Reputation: 30095

  • First of all, synchronize your setTimeout's and .animate()'s duration by setting animation duration to 400, like the timeout.

  • Second, use linear easing to remove any stacks in animation:

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

Demo.

Upvotes: 4

Ajinkya
Ajinkya

Reputation: 22710

Insted of fast give some value in .animate like 

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

Upvotes: 1

Related Questions