jQuery UI API - .hide()
Category
Effects | Effects Core | Method Overrides | Methods
Usage
Description: Hide the matched elements with a custom effect.
Returns: jQuery
| Parameter | Type | Description | Default Value |
|---|---|---|---|
| effect | String | A string indicating which effect to use for the transition. | |
| options | Object | Effect-specific settings and easing. | |
| 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. |
| Parameter | Type | Description |
|---|---|---|
| options | Object | All animation settings. The only required property is effect. effect<br> Type: String<br> Description: A string indicating which effect to use.<br> <br> <br> easing (default: "swing")<br> Type: String<br> Description: A string indicating which easing function to use.<br> <br> <br> duration (default: 400)<br> Type: Number or String<br> Description: A string or number determining how long the animation will run.<br> <br> <br> complete<br> Type: Function()<br> Description: A function to call once the animation is complete.<br> <br> <br> queue (default: true)<br> Type: Boolean or String<br> 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 the built-in .hide() method of jQuery. If jQuery UI is not loaded, calling .hide() method will not fail directly since the method exists in jQuery. However, the expected behavior will not occur.
Example
Hide a div using the Drop Effect.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>.hide() Demo</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>Hide div</button>
<div></div>
<script>
$( "button" ).click(function() {
$( "div" ).hide( "drop", { direction: "down" }, "slow" );
});
</script>
</body>
</html>