jQuery Effects - Fading
You may use jQuery to fade items in and out of view.
jQuery Fading Methods
You may use jQuery to fade an element's visibility in and out.
There are several fading methods available in jQuery :
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() and fadeOut() Methods
The fadeIn()
method is used to display a hidden element to visible with fading animation.
The fadeOut()
method is used to hide or remove a visible element with fading animation.
Syntax :-
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
The speed
and callback
parameters are optional.
The speed
parameter is used to control the duration of the animation effect. Possible values are "Slow", "Fast", or milliseconds.
The callback
parameter is a function that will be run once the fading is finished.
Example :-
Output :-
Related Links
jQuery fadeToggle() Method
The function jQuery fadeToggle()
toggles between the methods fadeIn()
and fadeOut()
.
If the components are removed, they will be blurred in using fadeToggle()
.
fadeToggle()
will fade out items that have been faded in.
Syntax :-
$(selector).fadeToggle(speed,callback);
Example :- The following code illustrates the fadeToggle()
function with various parameters :
This is a div text
Output :-
jQuery fadeTo() Method
The jQuery fadeTo()
function enables fading to a specified opacity (value between 0 and 1).
Syntax :-
$(selector).fadeTo(speed,opacity,callback);
The speed
and opacity
parameters are mandatory.
The callback
parameter is optional.
The effect's duration is determined by the speed
parameter. "Slow", "Fast", or milliseconds are all possible values.
The fadeTo()
method's opacity
argument indicates fading to a certain opacity level (value between 0 and 1).
Example :- The following example shows the function fadeTo()
with various parameters :
Demonstrate fadeTo() with different parameters.
Output :-
Related Links