jQuery fadeToggle() method

To allow users to show and hide elements of the website with fading effects, jQuery provides fadeToggle() method. The fadeToggle method with fadeIn if elements were fadeout and vice versa.

You may use fadeToggle to show and hide images, menus, table of content etc. The $.show and $.hide methods would also do this without fading effects.

Syntax of using fadeToggle 

$(selector). fadeToggle (speed, easing, callback);

You may use “slow”, “fast” or speed in milliseconds as using the fadeToggle method.

A callback function can also be executed. The examples below show using fadeToggle with different options along with the callback function.

An example of fadeToggle

In the first example, I used “fast” value for the speed in fadeToggle method. For that, we have three various colored boxes that are displayed as the demo page loads. As you click the button, the fadeToggle method executes and hides the boxes with fading effect with “fast” value:

Experience this example online

The example of using slow value

See this example online where I used “slow” value for all three boxes to disappear and appear with the fading effect:

Experience this example online

Using millisecond value example

In this example, the three CSS boxes will display or hide with various values in milliseconds.

  • The first box is given the 1000 value i.e. one second.
  • For the second box, 3000 value is given (three seconds).
  • Thir third box will disappear in five seconds as you click the button
Experience this example online

Fourth example: using callback function in jQuery fadeToggle

The last example shows using the callback function. The callback function executes as fadeToggle method execution is completed.

I used three alerts; one for each box. So, as the fading is done, the callback function will execute and display an alert for each box in different duration.

Experience this example online

Note that, the same can be achieved with the jQuery fadeIn and fadeOut methods. Both of these are explained in their tutorials here;

jQuery fadeIn and fadeOut.