jQuery UI API - Slide Effect

Category

Effects

Usage

Description:Slides the element out of the viewport.

slide

Parameters Type Description Default value
direction String The direction of the effect. Possible values: "left", "right", "up", "down". "both"
distance Number The distance of the effect. The default is the element's height or width, depending on the direction parameter. Can be set to any integer less than the element's width/height. The element's outerWidth

Examples

Use the Slide Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>滑动特效（Slide 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( "slide" );
});
</script>
 
</body>
</html>

Other Extensions