Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery animation on multiple elements, single animation thread/timer or multiple?

I'm wondering when the jQuery selector returns multiple elements and I do a "slideDown" for example on all those element...

$('.allthisclasss').slideDown();

Is there a single loop of code that moves all objects down in synch or if jQuery treats all objects separately and they each have a thread of execution to move themselves?

My question is about animation optimization and it would be great if there were only one timer for all objects instead of one per objects.

Anyone knows how jQuery handles this situation?

like image 634
Mike Gleason jr Couturier Avatar asked Jan 25 '10 16:01

Mike Gleason jr Couturier


People also ask

Which of the following properties can not be animated using jQuery?

The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality.

Is jQuery used for animation?

With jQuery, you can create custom animations.

Which jQuery method is used to stop an animation before it is finished?

The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations. Syntax: $(selector).

What is jQuery animate?

Definition and Usage. The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").


1 Answers

All animations are automatically added to the global effects queue in jQuery. But that does not mean they are animated sequentially, make a simple test page with ten elements that you all make to slide at the same time. You'll see that they are executed simultaneously.

To prevent that behaviour, you can make your own queues, with is best described by that example in the queue documentation

Happy hacking!

like image 131
Emil Stenström Avatar answered Sep 19 '22 23:09

Emil Stenström