jQuery provides some methods that are used to apply fade effects in order to show and hide the HTML elements by reducing their opacity i.e transparency.
With jQuery fade effects the elements don’t appear and disappear instantly you can see them fading in and out gradually.
jQuery Fading Methods:
jQuery has the following fading methods:
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
jQuery fadeIn() Method:
jQuery fadeIn() effect is used to make an HTML element appear gradually on the screen. This method also accepts speed and callback function as optional parameters that can help us adjust the fade-in speed and run a callback function when the fade-in effect is complete.
Syntax:
Speed is an optional parameter that specifies the speed of the delay and its possible values are slow, fast and milliseconds.
The callback is also an optional parameter that specifies the function to be called after completion of fading.
jQuery fadeOut() Method:
jQuery fadeIn() effect is used to make an HTML element appear gradually on the screen. This method also accepts speed and callback function as optional parameters that can help us adjust the fade-in speed and run a callback function when the fade-in effect is complete.
Syntax:
Speed is an optional parameter that specifies the speed of the delay and its possible values are slow, fast and milliseconds.
The callback is also an optional parameter that specifies the function to be called after completion of fading.
jQuery fadeToggle() Method:
The fadeToggle() method of jQuery is used to toggle between fadeIn() and fadeOut() effects. If the selected HTML elements are faded out, the fadeToggle() will fade in them, if they are faded in, then it will make them fade out.
Syntax:
Speed is an optional parameter that specifies the speed of the delay and its possible values are slow, fast and milliseconds.
The callback is also an optional parameter that specifies the function to be called after completion fading.
jQuery fadeTo() Method:
The jQuery fadeTo() method is used to adjust the opacity of HTML elements.
Syntax:
Speed is the required parameter that specifies the speed of the delay and its possible values are slow, fast and milliseconds.
Opacity is the required parameter that can take values between 0 and 1, 0 means completely invisible while 1 means completely visible. The values can be passed in decimal points such as 0.5, 0.25, etc.
The callback is also an optional parameter that specifies the function to be called after completion of hide() effect.