Fading Effects

Fading effects allow us to fade out or fade in certain elements on a webpage. The relevant effects are discussed in detail below.

fadeOut() effect

Given a selector, the fadeOut() effect fades out and hides the set of matched elements from a webpage. The fadeout()effect functions like hide(), but it has a delay. Like the effects studied earlier, fadeOut() can also take an optional speed parameter.

For example, in the “Fade Out” button event handler below, we fade out all the div elements in 2000 ms using the fadeOut() effect in line 3.

fadeIn() effect

Given a selector, the fadeIn() effect fades in and displays the hidden elements present in the set of matched elements on the webpage. These elements could have been hidden using either the fadeOut() or the hide() method. Similar to the other effects, fadeOut() can also take an optional speed parameter.

In the “Fade In” button event handler below, we fade in and redisplay the hidden div elements in 3000 ms using the fadeIn() effect in line 7.

fadeToggle() effect

The fadeToggle() effect is a combination of fadeIn() and fadeOut(). It resembles the toggle() effect. Given a selector, if the matched elements are in a visible state, this effect fades out the elements from the webpage. Similarly, if the matched elements are hidden, the effect fades them in and the elements reappear on the webpage.

You can observe the behavior in this example. In the “Toggle Fade” button event handler below, we toggle between fading out and fading in div elements using the fadeToggle() effect in line 3.