Ideas for implementing the javascript fade-in and fade-out effect_javascript skills

As the title says, there are only ideas, no code.

This idea was figured out recently when I was writing the XScroll.js class. The fade effect we usually talk about is generally divided into two parts, one half is fading in, and the other half is fading out. But after analysis, I think only half is enough.

For example, if you write a picture switching class, the switching effect is fade in and fade out. Usually we will write like this: when the switch occurs, the currently displayed picture fades out (gradually hides), and the picture to be displayed fades in (gradually appears) , usually the animation speed of the two pictures is the same, so that when the current picture is completely hidden, the next picture is completely displayed.

Let’s list a simple step:

The current picture fades out, and the transparency changes from 100% to 90%; at the same time, the next picture fades out, and the transparency changes from 0 to 10.
The transparency of the current picture is 80%, and the transparency of the next picture is 20%.
The transparency of the current picture is 70%, and the transparency of the next picture is 30%.
. . . .
10% of the current picture, 90% of the next picture
Complete switching
Actually, this is a complete waste!

Let’s think about it, if the zIndex of the next picture is located above the current picture, when it gradually appears, because it becomes more and more opaque, visually, the current picture below it will look more and more opaque. transparent!

For example, when the transparency of the next picture is 20%, because it covers the current picture, the transparency of the current picture looks like 100%-20%=80%!

So, when making a fade-in and fade-out switching effect, you only need the fade-in effect. While fading in, the fade-out occurs; when the fade-in ends, the fade-out ends. This way, you never have to worry about fade-in and fade-out being out of sync.

The key is that in this way, you only need to set the transparency of one picture (i.e. the next picture) in a loop at the same time, without caring about the blocked one (i.e. the current picture), saving half of the calculations. This can be regarded as optimizing the execution efficiency of javascript, right?

So, my idea to achieve the fade-in and fade-out switching effect is:

Set the zIndex of the next picture above the current picture
Fade in (fade in) the next picture. Loop; the current picture is not operated.
When the fade-in is in progress, the fade-out occurs simultaneously; when the fade-in is completed, the fade-out is completed simultaneously.
Note: This idea is only suitable for situations where the current picture overlaps with the next picture (this is the case most of the time).