onzinsky onzinsky - 11 months ago 84
jQuery Question

Should I use/avoid jQuery animate?

A question popped to mind answering to this one, where OP wanted to apply this transition:

test.css({transition: 'height 1s linear', height: '100px'});

And then to go back to this:

test.css({transition: 'none', height: '0px'});

He said he needed it to be done from js, and asked for a better idea, so I offered this approach:

test.animate({height: '100px'}, 1000, 'linear', function(){
test.css({transition: 'none', height: '0px'});

Here is my jsFiddle: https://jsfiddle.net/mqaunyvp/1/

@Matrix commented that JS and jQuery animations are less optimised than native CSS, which is right, but I think not on topic in that context.

So here is the question:

Is it right to accomplish this the way I suggested? Or would you advise against it? Why?


A conclusion from all the comments:

jQuery was not created for animating objects, so it may be slow and laggy (depending on what and how much you're animating).

For more advanced animations (like moving objects or doing complex or many animations at the same time), use librarys as velocity.

If you just want to animate text style/color or a slide-down menu, it's faster (and easier IMO) to use CSS transitions/animations.

So it depends on what you're doing. Hope this helps!