Fading Effects

Explore the fading effects in jQuery such as fadeOut(), fadeIn(), and fadeToggle() along with relevant examples.

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.

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy