jQuery fadeTo method with demo code

The fadeTo() method of jQuery

In previous chapters, we learned how to use jQuery fadeIn and fadeOut methods to make elements visible or hidden with effects. However, in some situations you may need to make elements a slightly visible rather hiding completely, e.g. showing  the “disable” parts of your website etc.

See an example of fadeTo

The fadeTo method will do that, how? See the syntax and example below:

Syntax of fadeTo method

Following is the syntax of fade to method:



Selector = an element of the web page.

Opacity = this is the required parameter of jQuery fadeTo that defines to which extent the elements should be hidden. It ranges from 0 to 1. Where 0 makes the elements hidden and 1 completely visible.

Speed = Optional parameter that specifies the fadeTo speed with possible values of:

  • “slow”
  • “fast”
  • Or value in milliseconds

Callback = An optional callback function after the method is completed its execution.

Example of fadeTo method

Following example shows how to use fadeTo jQuery method. As you click on the button, it will affect the visibility of boxes by the given values in jQuery fadeTo method.

Experience this example online


Also see jQuery fadeOut | jQuery fadeToggle | jQuery fadeIn

Was this article helpful?

Related Articles

Leave A Comment?