CODEWITHSUNDEEP
jquery
deEr.
deEr.

Reputation: 557

Why is jQuery .animate() jumpy?

On https://xjour.com I have a jumpy navigation animation.

It does jump on FF and Chrome.

Works as expected on Edge and mobile.

I made a JSFiddle to reproduce the problem.

Here it works as expected though.

Please click outside the navigation to close it — not on the links.

https://jsfiddle.net/9kak1088/

The code is nothing more than

function open() {


        $('.menu').animate({
            'width':'17vw'
        },100)

        $('html').one('click', close)
}

function close() {

        $('.menu').animate({
            'width':'2.994vw'
        },100)


        $('.menu').one('click',open)
}

$('.menu').one('click',open);

Upvotes: 0

Views: 700

Answers (1)

Kaddath
Kaddath

Reputation: 6151

I couldn't access to your example site because of secure connexion failed, but it is ok with the fiddle.

jQuery animate used to be an OK solution before CSS3, but it can suffer from some performance problems coming from Javascript. From what i understand, it animates with calculating and moving elements positions based on timeout functions. That can be really jumpy depending on how many elements you animate, or if javascript is really busy doing something else at the time.

A common solution here would be to use CSS3 features that were made specially for this. You can eventually use the jQuery solution as a fallback for old browsers (you have solutions to detect in javascript if CSS3 is supported).

CSS3 transition works by setting transition on a CSS attribute:

.menu{
    transition: width 0.1s linear 0s;
    -moz-transition: width 0.1s linear 0s;
    -webkit-transition: width 0.1s linear 0s;
    -o-transition: width 0.1s linear 0s;
    -ms-transition: width 0.1s linear 0s;
}

then, when the attribute value is modified, broswer animates it automatically:

$('.menu').css({
    'width':'41vw'
});

here is a fiddle: https://jsfiddle.net/fz4pwwjj/2/

Upvotes: 2

Related Questions