May 07, 2021 jQuery
With jQuery, you can achieve a fade-in effect for elements.
Click to show fade-in/fade-out panel
Because time is precious, we provide fast and convenient learning methods.
At W3CSchool, you can learn what you need.
jQuery fadeIn()
Demonstrates the jQuery fadeIn() method.
jQuery fadeOut()
Demonstrate the jQuery fadeOut() method.
jQuery fadeToggle()
Demonstrate the jQuery fadeToggle() method.
jQuery fadeTo()
Demonstrate the jQuery fadeTo() method.
With jQuery, you can achieve a fade-in effect for elements.
jQuery has four fade methods:
jQuery fadeIn() is used to fade in hidden elements.
Grammar:
The optional speed parameter specifies the length of the effect. It can take the following values: "slow," "fast," or milliseconds.
The optional callback parameter is the name of the function executed after fading is complete.
The following example demonstrates the fadeIn() method with different parameters:
The jQuery fadeOut() method is used to fade out visible elements.
Grammar:
The optional speed parameter specifies the length of the effect. It can take the following values: "slow," "fast," or milliseconds.
The optional callback parameter is the name of the function executed after fading is complete.
The following example demonstrates the fadeOut() method with different parameters:
The jQuery fadeToggle() method can be switched between the fadeIn() and fadeOut() methods.
If the element fades out, fadeToggle() adds a fade-in effect to the element.
FadeToggle() adds a fade-out effect to the element if it has faded in.
Grammar:
The optional speed parameter specifies the length of the effect. It can take the following values: "slow," "fast," or milliseconds.
The optional callback parameter is the name of the function executed after fading is complete.
The following example demonstrates the fadeToggle() method with different parameters:
The jQuery fadeTo() method allows the fade to become a given opacity (values between 0 and 1).
Grammar:
The required speed parameter specifies the length of the effect. It can take the following values: "slow," "fast," or milliseconds.
The opacity parameter required in the fadeTo() method sets the fade-in effect to a given opacity (values between 0 and 1).
The optional callback argument is the name of the function executed after the function is completed.
The following example demonstrates the fadeTo() method with different parameters: