The .animate() method in jQuery is used to handle effects and animations. Properties which have numeric values can be animated by this method such as width, height, border-width etc. however, the property names should be camel cased( eg. borderWidth). Usually, if different animations are chained on the same html element, jQuery adds them to a queue and they are executed sequentially. In this article, we will discuss how we can make such animations simultaneously. The animate() method will only trigger after the event (being listened to) occurs on the page. For two different HTML elements, on triggering of an event, the animations will occur simultaneously.
According the official jQuery documentation, the .animate() method offers two prototypes:
The following code demonstrates how chaining animations would look like:
In the above example, we have chained three animations to the HTML button element. The animations trigger on click. The same would’ve happened for the following set of code:
We can cause the animations to trigger simultaneously in two ways.
Method 1: Using ‘QUEUE’ Property in options
By passing the option
queue : false, we ensure that the animations do not get added to the queue. The default animation queue in jQuery is called fx. The above method is especially useful when you want certain animations to happen simultaneously and certain animations to occur sequentially with better readability of code. By default, queue is true.
Method 2: Passing all the css properties in a single object
Through the above two methods, the task of implementing two or more animations in jQuery can be implemented simultaneously as opposed to placing them in the queue and executing them sequentially.
- jQuery | Stop Animations
- CSS | Animations
- Opening google search results simultaneously in new tabs in Chrome
- AngularJS | Animations
- Android Animations in Kotlin
- jQuery | jQuery.support Property
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jquery Property
- jQuery | #id Selector
- JQuery | now() method
- jQuery UI | Tooltip
- jQuery UI | Tabs
- Get the current URL using jQuery?
- jQuery | is() Method
- jQuery | val() with Examples
- jQuery | parentsUntil() with Example
- jQuery | offsetParent() with Example
- jQuery | :first Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.