How to Make jQuery Animations on Different Elements Sequentially

Learn how to use jQuery animations effectively to `fade in` and `fade out` multiple elements one after another.
---
This video is based on the question https://stackoverflow.com/q/67320099/ asked by the user 'Daweed' ( https://stackoverflow.com/u/13094162/ ) and on the answer https://stackoverflow.com/a/67320272/ provided by the user 'Ashkan Mobayen Khiabani' ( https://stackoverflow.com/u/1079221/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Why is jQuery applying effects on different elements at once?

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Make jQuery Animations on Different Elements Sequentially

Have you ever wanted to create a seamless experience on your website where elements fade in and out one after another? If you’re using jQuery for animations, you might run into a common issue: the animations apply to all elements simultaneously instead of sequentially. This can be frustrating, especially when you want to emphasize one element at a time. In this guide, we will tackle this problem and provide a clear solution using jQuery.

The Problem

You may have two HTML elements, and your goal is to have them fade in, remain visible for a few seconds, and then fade out, one after the other. However, when you apply the jQuery fade effects, both elements fade in and out at the same time, leading to a chaotic display. For example, the typical jQuery code you might use looks like this:

[[See Video to Reveal this Text or Code Snippet]]

Here, the results are not as desired. Both elements respond to the animations at the same time, rather than following a sequential order.

Understanding the Solution

To resolve this issue, we need to ensure that jQuery waits for the first animation to complete before starting the second. This can be achieved by utilizing the $.when() method combined with done() callback function. Let’s break this down into easy steps.

Step 1: Use $.when() Method

The $.when() method lets you wait for one or more jQuery Deferred objects (in our case, animations) to complete before executing a callback function. This ensures that you can chain multiple animations in the order you want.

Step 2: Implement Callback with done()

The done() method is a callback that executes once the first animation is complete. This allows us to start the next animation only after the first one has finished.

The Updated Code

Here’s how you can rewrite your jQuery code to achieve the desired effects:

[[See Video to Reveal this Text or Code Snippet]]

Putting It All Together

Complete HTML Example

Here’s how your complete setup should look:

[[See Video to Reveal this Text or Code Snippet]]

Broken Down Process

Initial Fade In: The first element (# first) fades in over 2 seconds.

Stay Visible: It remains visible for 3 seconds.

Fade Out the First: The first element then fades out over 2 seconds.

Continue with Second: Only after the first procedure is completed, the second element (# second) starts to fade in and follows the same pattern.

Conclusion

By utilizing jQuery’s $.when() and done() methods, you can effortlessly create a pleasing sequential animation effect with your elements. This not only enhances the user experience by providing a clear focus on each element but also improves the aesthetic of your web pages. Try applying this code to your own projects, and watch your animations come to life in a smooth, organized manner!

Видео How to Make jQuery Animations on Different Elements Sequentially канала vlogize