.animate(); in Javascript is Freezing for a second

Question

I am having problems with .animate() in Javascript. I am using it to automatically scroll to an element in a div whitch is working. The problem I have is that after a few milliseconds the scrolling freezes for a second or so and then continues at that point where it should already had animated to and then it continues animating without any problems.

The scrollable div contains about 36 divs with the width of 75 px and in the background is a dynamically generated SVG graph. To animate the div I using

parent.stop(true, false).animate({
            scrollLeft: offsetToLeft
        }, 50*Math.abs(elementsToSkipp), function (element, index) {
            //Show highlight the element and refresh data
            return false;
        }.bind(this, forecastElement[0], index));

The return false; and .stop(true, false) is from Stackoverflow, but it did not really fixed my issue. Help is very appreciated.

EDIT: I only experience this lag on mobile devices (iOS, Android), there is no such lag on a Desktop PC.

Thanks,

David

Answer 1

it sounds like you are running your animation as a response to a scroll event . here is a post wich solves this kind of problem (including code): Jquery slow reaction time