jQuery UI API - Clip Effect

Category

Effects

Usage

Description:The Clip Effect hides or shows an element by clipping it vertically or horizontally.

clip

Parameters Type Description Default Value
direction String The direction in which the Clip Effect hides or shows an element.
vertical clips the top and bottom edges; horizontal clips the left and right edges.		 "vertical"

Examples

Use the Clip Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>剪辑特效（Clip 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( "clip" );
});
</script>
 
</body>
</html>

Other Extensions