Latest web development tutorials

jQuery UI API - Clip effects (Clip Effect)

category

Special effects (Effects)

usage

Description: Clip effects (Clip Effect) vertical or horizontal direction by clamping and cutting element to hide or show an element.

clip

参数 类型 描述 默认值
direction String 剪辑特效隐藏或显示元素的方向。
vertical 剪辑上下边缘，horizontal 剪辑左右边缘。 		"vertical"

Examples

Use Clip effects (Clip Effect) switching a div. 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> Clip effects (Clip Effect) Demo </ 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> Click anywhere to switch. </ P>
<Div id = "toggle"> </ div>
 
<Script>
$ (Document) .click (function () {
  $ ( "#toggle") .toggle ( "Clip");
});
</ Script>
 
</ Body>
</ Html>