JQuery effect-Fade in

Instance

JQuery FadeIn ()

Demonstrates the JQuery FadeIn () method.

JQuery FadeOut ()

Demonstrates the JQuery FadeOut () method.

JQuery Fadetoggle ()

Demonstrates the JQuery Fadetoggle () method.

JQuery FadeTo ()

demonstrates the JQuery FadeTo () method.

JQuery Fading Method

With JQuery, you can implement the fade-out effect of elements.

JQuery has the following four methods of fade:

• FadeIn ()
• FadeOut ()
• Fadetoggle ()
• FadeTo ()

JQuery FadeIn () method

JQuery fadeIn () is used to fade in hidden elements.

Grammar:

$ (selector). FadeIn (Speed,callback);

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 that is executed after fading completes.

The following example shows the FadeIn () method with different parameters:

Instance

$ ("button"). Click (function () {  $ ("#div1"). FadeIn ();  $ ("#div2"). FadeIn ("slow");  $ ("#div3"). FadeIn (3000);});

JQuery FadeOut () method

The JQuery FadeOut () method is used to fade out visible elements.

Grammar:

$ (selector). FadeOut (Speed,callback);

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 that is executed after fading completes.

The following example shows the FadeOut () method with different parameters:

Instance

$ ("button"). Click (function () {  $ ("#div1"). FadeOut ();  $ ("#div2"). FadeOut ("slow");  $ ("#div3"). FadeOut (3000);});

JQuery Fadetoggle () method

The JQuery Fadetoggle () method can be toggled between the fadeIn () and the FadeOut () method.

If the element has faded out, fadetoggle () adds a fade effect to the element.

If the element has been faded in, fadetoggle () adds a fade effect to the element.

Grammar:

$ (selector). Fadetoggle (Speed,callback);

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 that is executed after fading completes.

The following example shows the Fadetoggle () method with different parameters:

Instance

$ ("button"). Click (function () {  $ ("#div1"). Fadetoggle ();  $ ("#div2"). Fadetoggle ("slow");  $ ("#div3"). Fadetoggle (3000);});

JQuery FadeTo () method

The JQuery FadeTo () method allows the gradient to be given opacity (values between 0 and 1).

Grammar:

$ (selector). FadeTo (Speed,opacity,callback);

The required speed parameter specifies the length 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 (values between 0 and 1).

The optional callback parameter is the function name that is executed after the function completes.

The following example shows the FadeTo () method with different parameters:

Instance

$ ("button"). Click (function () {  $ ("#div1"). FadeTo ("slow", 0.15);  $ ("#div2"). FadeTo ("slow", 0.4);  $ ("#div3"). FadeTo ("slow", 0.7);});

JQuery Effect Reference Manual

For a full view of the jquery effect, please visit the jquery Effect reference manual.

JQuery effect-Fade in