Jqurey Learning Notes---6, jQuery effect-fade in

JQuery Effects-Fade instances

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 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 yourself.

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 yourself.

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 function /tr>

Method	Description
animate ()	apply custom animations to selected elements
Clearqueue ()	removes all queued functions from the selected element (still not running)
delay ()	set delay for all queued functions of the selected element (still not running)
dequeue ()	run the next queued function of the selected element
fadeIn ()	gradually change the opacity of the selected element, from hidden to visible
fadeOut ()	gradually changes the opacity of the selected element, from visible to hidden
fadeTo ()	gradually change the selected element to a given opacity
Hide ()	Hide selected elements
queue ()	Display queued functions for selected elements
Show ()	Display the selected element
Slidedown ()	swipe to display selected elements by adjusting the height
slidetoggle ()	Toggles the selected element to slide-hide and slide-display
slideup ()	swipe to hide selected elements by adjusting the height
Stop ()	stops running animations on selected elements
Toggle ()	Toggles the selected element to be hidden and displayed

Jqurey Learning Notes---6, jQuery effect-fade in