Скачать или смотреть How to Convert jQuery Hide/Fade/Delay Animations to Pure JavaScript

Learn how to effortlessly convert jQuery animations to pure JavaScript, improving performance and removing dependencies in your web applications.
---
This video is based on the question https://stackoverflow.com/q/68459839/ asked by the user 'user756659' ( https://stackoverflow.com/u/756659/ ) and on the answer https://stackoverflow.com/a/68461513/ provided by the user 'user756659' ( https://stackoverflow.com/u/756659/ ) 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: converting jquery hide/fade/delay/animation to pure js

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

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Converting jQuery Hide/Fade/Delay Animations to Pure JavaScript

Removing dependencies on jQuery is a common goal for many web developers aiming for a cleaner and faster codebase. If you are working with jQuery to handle animations like hide, fade, and delays, you may feel a bit lost when trying to replicate those functionalities using just JavaScript. In this guide, we will tackle this very challenge!

The Problem: Understanding jQuery Animations

Let's first understand the original jQuery code that performs the animations:

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

Key Components of the Code

Hide: This reduces the opacity of the top slide to 0, effectively making it invisible.

Set Background: Changes the background image by referencing an array of images.

Delay: Holds the state for a specified duration (6000 milliseconds).

Fade In: Gradually increases the opacity to 1 over 2000 milliseconds allowing for a smooth transition.

The Solution: Pure JavaScript Implementation

To replicate this behavior using pure JavaScript, we will use setTimeout, CSS transitions for fading, and manual opacity control. Below is the complete pure JavaScript code:

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

Breakdown of the Code

Setup Variables:

We define our images array, select the top and bottom slideshow elements, and initialize our loop counter.

Preloading Images:

A loop to preload images ensures smooth transitions by loading them before they are needed.

Animation Loop:

The outer loopBg function repeats every 6 seconds. It first changes the top slide's background and increases its opacity to 1, making it visible.

After 3 seconds (to allow the opacity change), it updates the background of the bottom slide and reduces the top slide's opacity back to 0.

CSS for Smooth Transition

To enhance the visual effect, we should add CSS transitions:

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

Conclusion

Transitioning from jQuery to pure JavaScript for animations can seem daunting at first, but with an understanding of timing functions and CSS transitions, it can be achieved quite effectively. This not only improves loading times by removing the jQuery dependency but also optimizes performance for your web application.

Happy coding!