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