jQuery Fading Effect

tutorial and example
tutorial and example

jQuery Fade

Using jQuery, you can fade elemnts in and out of visibility. You can change the opacity level of elements from invisible state to visible state or visible state to invisible state.

Here are some fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() Method

Using the jQuery fadeIn() method, you can change the opacity level from invisible state to visible state of a selected HTML element.

Syntax:

speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.

callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeIn() method.

Example:

Try Now

jQuery fadeOut() Method

Using the jQuery fadeOut() method, we can change the item’s visibility. It sets the selected item in the invisible state. So the visibility of the selected element will be in transparent mode.

Syntax:

speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.

callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeOut() method.

Example:

Try Now

jQuery fadeToggle()

The jQuery fadeToggle() method is used to make toggle between the fadeIn() and fadeOut() method. If the elements are faded in, the fadeToggle() method make them faded out and if they are faded out then the fadeToggle() method make them faded in.

Syntax:

speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.

callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeToggle() method.

Example:

Try Now

jQuery fadeTo () Method

jQuery fadeTo() method is used to fading to a given opacity . Opacity value starts from 0 to 1.

Syntax:

speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds.

callback: Callback is an optional parameter. It represents a function to be executed after the completion of the fadeTo() method.

Example:

Try Now