JQuery effect – fade in and out

in jquery There are four ways to achieve the fading of elements, the four methods are:fadeIn (),fadeOut (),Fadetoggle (), and fadeTo (), This article gives you an example of how to use these four methods in jquery.

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

Click the show fade in/fade out panel

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);
});
Try it?

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);
});
Try it?

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);
});
Try it?

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);
});
Try it?

JQuery effect – fade in and out