jQuery UI API - .toggle()

Category

Effects | Effects Core | Method Overrides | Methods

Usage

Description:Display or hide the matched elements using custom effects.

Returns:jQuery

.toggle( effect [, options ] [, duration ] [, complete ] )

Parameters Type Description Default
effect String A string indicating whicheffect to use.。
options Object The effect-specific settings andeasing。
duration Number or String A string or number that specifies how long the animation will run. 400
complete Function() A function to call once the animation is complete.

.toggle( options )

Parameters Type Description
options Object All animation settings. The only required property is effect.
  • effect
    Type: String
    Description: A string indicating whicheffect to use.。
  • easing(default:"swing"）
    Type: String
    Description: A string indicating theeasingfunction to use.
  • duration(default:400）
    Type: Number or String
    Description: A string or number that specifies how long the animation will run.
  • complete
    Type: Function()
    Description: A function to call once the animation is complete.
  • queue(default:true）
    Type: Boolean or String
    Description: A boolean value indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.As of jQuery 1.7, the queue option also accepts a string, in which case the animation is added to the queue represented by the string.

This plugin extends jQuery's built-in.toggle()method. If jQuery UI is not loaded, calling the.toggle()method will not fail directly, because the method exists in jQuery. However, the expected behavior will not occur.

Examples

Toggle a div using the Fold Effect.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.toggle() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<button>切换 div</button>
<div></div>
 
<script>
$( "button" ).click(function() {
  $( "div" ).toggle( "fold", 1000 );
});
</script>
 
</body>
</html>

Other Extensions