jQuery UI API - .show()

Category

Effects | Effects Core | Method Overrides | Methods

Usage

Description:Display the matched elements using a custom effect.

Returns:jQuery

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

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

.show( 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 determining 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 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 that string.

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

Examples

Use the Fold Effect to display a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.show() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    display: none;
    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" ).show( "fold", 1000 );
});
</script>
 
</body>
</html>

Other extensions