Easy Tutorial
❮ Css Height Misc Now ❯

jQuery fadeToggle() Method

jQuery Effects Methods

Example

Toggle fade in and fade out for different boxes:


Definition and Usage

The fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).


Syntax

Parameter Description
speed Optional. Specifies the speed of the fading effect. Possible values: milliseconds<br> "slow"<br> "fast"
easing Optional. Specifies the speed of the element at different points of the animation. Default value is "swing". Possible values: "swing" - moves slower at the beginning/end, faster in the middle<br> "linear" - moves at a constant speed. Tip: More easing functions are available in extensions.
callback Optional. A function to be executed after the fadeToggle() method is completed.<br><br>For more information about the callback, visit jQuery Callback

More Examples

fadeToggle() - Using speed parameter

fadeToggle() - Using callback parameter


jQuery Effects Methods

❮ Css Height Misc Now ❯