Another idea: javascript fade-in and fade-out

Only ideas, noCode.

This idea is written recently.Xscroll. jsClass. The Fade-in and fade-out effect is generally divided into two parts: fade-in and fade-out. However, after analysis, I think it takes only half of it.

For example, if you write an image switching class, the switching effect is fade-in and fade-out. We usually write the following: when switching occurs, the currently displayed image fades out (gradually hidden ), the animation speed of the two images is usually the same, so that the current image is completely hidden when the next image is completely displayed.

Let's list a simpleProcedure:

• The current image fades in, and the transparency changes from 100% to 90%. At the same time, the next image fades in, and the transparency changes from 0 to 10.
• The transparency of the current image is 80%, and the transparency of the next image is 20%.
• The current figure is 70%, and the next figure is 30%.
• ....
• Current figure 10%, next figure 90%
• Switch complete

In fact,This is a waste.!

Let's think about it. If the zindex of the next graph is located on the top of the current graph, as it gradually becomes more and more opaque, the current image at its lower layer will gradually become invisible visually!

For example, when the transparency of the next image is 20%, the transparency of the current image is 100%-20% = 80%!

Therefore, when creating a fade-in and fade-out switching effect, you only need to fade-in the effect, while fade-out occurs. When fade-In ends, it means fade-out ends. In this way, you never have to worry about the synchronization between fade-in and fade-out.

The key is to set the transparency (that is, the next image) of an image in a loop at the same time. You do not need to block this image (that is, the current image ),Saves half of the computing cost. This is alsoOptimizationJavascriptExecution efficiencyRight?

Therefore, my idea for implementing the switching effect of Fade-in and fade-out is:

1. Set zindex of the next image to the current image
2. The next image is fade-in (Fade-in). The current image is not operated.
3. Fade-In occurs. Fade-In completes, and fade-out completes at the same time.

Note:This method is only applicable when the current graph and the next graph overlap.(Most of the time ).

Http://www.jo2.org/archives/298.htm.