jQuery UI API - .hide()

Category

Effects | Effects Core | Method Overrides | Methods

Usage

Description:Use a custom effect to hide matched elements.

Returns:jQuery

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

Parameters Type Description Default
effect String A string indicating which one to useeffect。
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.

.hide( options )

Parameters Type Description
options Object All animation settings. The only required property is effect.
  • effect
    Type: String
    Description: A string indicating which one to useeffect。
  • easing(Default:"swing"）
    Type: String
    Description: A string indicating theeasingfunction.
  • 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.

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

Example

Use the Drop Effect to hide a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.hide() 演示</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" ).hide( "drop", { direction: "down" }, "slow" );
});
</script>
 
</body>
</html>

Other Extensions