jQuery UI API - Blind Effect

Category

Effects

Usage

Description:The Blind Effect hides or shows an element by wrapping it in a container and using a "pull the blinds" effect.

blind

Parameters Type Description Default value
direction String The direction in which the blinds are pulled when hiding an element, and the direction when showing an element.
Possible values: up, down, left, right, vertical, horizontal.		 "up"

When the container is appliedoverflow: hiddenchanges in height affect the visibility of the element.

Example

Use the Blind Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>百叶窗特效（Blind Effect）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </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>
 
<p>点击任意地方进行切换。</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "blind" );
});
</script>
 
</body>
</html>

Other extensions