Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.