How to fade in and out of HTML elements in jQuery
This article will explain in detail how to fade in and out of HTML elements in jQuery. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
JQuery Fading method
With jQuery, you can fade in and out of elements. JQuery has the following four fade methods:
FadeIn () fadeOut () fadeToggle () fadeTo ()
JQuery fadeIn () method
JQuery fadeIn () is used to fade in hidden elements. Syntax:
$(selector) .fadeIn (speed,callback)
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function that executes after the fading completes.
The following example demonstrates the fadeIn () method with different parameters:
$(document) .ready (function () {$("button") .click (function () {$("# div1"). FadeIn (); $("# div2"). FadeIn ("slow"); $("# div3"). FadeIn (3000);})
Demonstrates the fadeIn () method with different parameters.
Click here to fade in the three rectangles
JQuery fadeOut () method
The jQuery fadeOut () method is used to fade out visible elements. Syntax:
$(selector) .fadeOut (speed,callback)
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function that executes after the fading completes.
The following example demonstrates the fadeOut () method with different parameters:
$(document) .ready (function () {$("button") .click (function () {$("# div1"). FadeOut (); $("# div2"). FadeOut ("slow"); $("# div3"). FadeOut (3000);})
Demonstrates the fadeOut () method with different parameters.
Click here to make the three rectangles fade out
JQuery fadeToggle () method
The jQuery fadeToggle () method can switch between the fadeIn () and fadeOut () methods.
If the element has faded out, fadeToggle () adds a fade effect to the element.
If the element has faded, fadeToggle () adds a fade-out effect to the element.
Syntax:
$(selector) .fadeToggle (speed,callback)
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function that executes after the fading completes.
The following example demonstrates the fadeToggle () method with different parameters:
$(document) .ready (function () {$("button") .click (function () {$("# div1"). FadeToggle (); $("# div2"). FadeToggle ("slow"); $("# div3"). FadeToggle (3000);})
Demonstrates the fadeToggle () method with different parameters.
Click here to make the three rectangles fade in and out
JQuery fadeTo () method
The jQuery fadeTo () method allows the gradient to be given opacity (values between 0 and 1). Syntax:
$(selector) .fadeto (speed,opacity,callback)
The required speed parameters specify the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The required opacity parameter in the fadeTo () method sets the fade effect to the given opacity (0-1).
The optional callback argument is the name of the function that executes after the function completes.
The following example demonstrates the fadeTo () method with different parameters:
$(document) .ready (function () {$("button") .click (function () {$("# div1"). FadeTo ("slow", 0.15); $("# div2"). FadeTo ("slow", 0.4); $("# div3") .fadeTo ("slow", 0.7);})
Demonstrates the fadeTo () method with different parameters.
Click here to make the three rectangles fade out
This is the end of the article on "how to fade in and out of HTML elements in jQuery". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.
