jQuery toggle()Method

jQuery 效果方法jQuery Effect Methods

Example

Toggle between hiding and showing on all <p> elements:

$("button").click(function(){ $("p").toggle(); });

Try it Yourself »

Definition and Usage

The toggle() method performs on the selected elementshide()andshow()a toggle between hiding and showing.

This method checks the visible state of the selected elements. If an element is hidden, show() is run; if an element is visible, hide() is run - this creates a toggle effect.

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

Tip:This method can be used to toggle between custom functions.

Syntax

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

Parameter Description
speed Optional. Specifies the speed of the hide/show effect.

Possible values:

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

Possible values:

  • "swing" - moves slowly at the beginning/end, fast in the middle
  • "linear" - moves at a constant speed
Tip:More easing functions are available in extension plugins.
callback Optional. The function to execute after the toggle() method has completed.

To learn more about callback, please visit ourjQuery Callbackchapter on this topic.

实例

More Examples

toggle() - Using the speed parameter
How to use the speed parameter to specify the speed of the hide/show effect.

toggle() - Using the callback parameter
How to use the callback parameter when toggling between hide/show effects.

jQuery 效果方法jQuery Effect Methods

Other Extensions