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