jQuery fadeToggle()Method

jQuery 效果方法jQuery Effects Methods

Examples

Toggle between fading in and fading out for different boxes:

$("button").click(function(){
$("#div1").fadeToggle();
});

Try it Yourself »

Definition and Usage

The fadeToggle() methodfadeIn()andfadeOut()toggles between methods.

If the elements are faded out (hidden), fadeToggle() displays them with a fade-in effect.

If the elements are faded in (visible), fadeToggle() hides them with a fade-out effect.

Note:Hidden elements will not be fully displayed (they no longer affect the page layout).

Syntax

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

Parameter Description
speed Optional. Specifies the speed of the fading effect.

Possible values:

  • Milliseconds
  • "slow"
  • "fast"
easing Optional. Specifies the speed of the element at different points of the animation. Default value is "swing".

Possible values:

  • "swing" - moves slowly at the beginning/end, fast in the middle
  • "linear" - moves at a uniform speed
Tip:More easing functions are available in the extension plugins.
callback Optional. A function to be executed after the fadeToggle() method is completed.

To learn more about callback, please visit ourjQuery Callbackthis chapter.

实例

More Examples

fadeToggle() - using the speed parameter
How to use the speed parameter to specify the speed of the fading effect.

fadeToggle() - using the callback parameter
How to use the callback parameter to execute a function after the fadeToggle() method is completed.

jQuery 效果方法jQuery Effects Methods

Other Extensions