jQuery Fading Effect

Introduction to Fading Effects

The interactivity of a website can be enhanced using jQuery effects. jQuery provides a way for performing numerous spectacular effects such as show, hide, fade-in, fade-out, slide-up, slide-down, toggle, and so on. Using jQuery methods, we can easily apply generally used effects without much effort.

In this lesson, let's go through the essential jQuery methods for creating fading effects. Fading mostly affects the opacity of specific elements.

We can use jQuery to fade in and out elements based on their opacity. There are numerous methods in jQuery that will assist us in achieving the fading effect. We will see examples of each method.

List of jQuery Fading Methods

The following fading methods are available in jQuery:

• fadeIn() - Use this function to display the matching components with a fade-in effect.
• fadeOut() - Use the fade-out / translucent effect to hide the matched components.
• fadeToggle() - Toggles between the fadeIn() and fadeOut() functions with fadeToggle().
• fadeTo() - Sets the opacity of the matched components.

jQuery fadeIn() Method (Syntax + Example)

Fade the matched pieces to opaque to show them off. The method .fadeIn() animates the opacity of the matching items. It is identical to the .fadeTo() method, except that it does not unhide the element and does not allow you to select the ultimate opacity level.

Durations are indicated in milliseconds here. The greater the values are, the slower the animations work. The strings 'quick' and ‘slow' denote periods of 200 and 600 milliseconds, respectively. If no additional string is supplied, or if the duration parameter is omitted, 400 milliseconds is used as the default value of the duration parameter.

Syntax

Method parameters:

• duration: A text or number that defines how long the animation will last.
• complete: Run this procedure once per each matching element once the animation is finished.

Example:

The code given below animates hidden divs to fade in one by one, each animation taking 600 milliseconds to complete.

You can view the output by running this code on any browser.

jQuery fadeOut() Method (Syntax + Example)

Fade the matched items to transparent to hide them. The .fadeOut() method changes the opacity of the matched components in real time. When the opacity hits zero, the display style property is set to none, and the element no longer impacts the page layout.

Durations are indicated in milliseconds. The greater the values are for the duration, the slower the animations work. The strings 'quick' and ‘slow' represent periods of 200 and 600 milliseconds, respectively. 400 milliseconds is used as the default value of the duration parameter if no additional string is supplied or if the duration parameter is omitted.

Syntax:

Method Parameters:

• duration: A text or number that specifies how long the animation will last.
• easing: A string depicting which transition easing function to employ.
• complete: Once the animation is finished, run this procedure once per each matching element.

Example:

You can see the output by running the above code on a web browser. The paragraph will fade away once you click on it.

jQuery fadeToggle() Method (Syntax + Example)

By animating the opacity of the matching items, you can show or conceal them. The .fadeToggle() method changes the opacity of the matched items in real time. When called, the method will fade in the element to display it and fade out the element to hide it, alternatively.

Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. The strings 'quick' and slow' indicate periods of 200 and 600 milliseconds, respectively.

Syntax:

• duration: A text or number that specifies how long the animation will last.
• easing: A string depicting which transition easing function to employ.
• complete: Once the animation is finished, run this procedure once per each matching element.

Example:

In the example given below, the element fades in or out of the first paragraph, completing the animation in 600 milliseconds and using linear easing. The last paragraph is in or out, in 200 milliseconds, inserting a "completed" message upon completion.

You can run the above code on a web browser to see the output.

jQuery fadeTo() Method (Syntax + Example)

This method increases or decreases the opacity of the matched items. The .fadeTo() method changes the opacity of the matched items in real-time. It is comparable to the .fadeIn() method. However, that technique always unhides the element and fades to 100% opacity.

Durations are indicated in milliseconds. The greater the values for duration are, the slower the animations work. The strings 'quick' and slow' denote periods of 200 and 600 ms, respectively. A duration of 400 milliseconds is utilized if no string is provided. Unlike the other effect methods, .fadeTo() requires an explicit duration to be given.

Syntax:

• duration: A string or number that specifies how long the animation will last.
• opacity: A number between 0 and 1 indicating the desired opacity.
• complete: When the animation is finished, call this function.

Example:

In the example code given below, the first paragraph is animated to fade to an opacity of 0.33 (33%, about one-third visible), with the animation completed in 600 milliseconds.

You can view the output by running this code on a browser.