jQuery UI slide-effect documentation

Slide Effect

Description: Slides the element out of the viewport.

slide
- direction (default: "both")
  
  Type: String
  
  The direction of the effect. Possible values: "left", "right", "up", "down".
- distance (default: element's outerWidth)
  
  Type: Number
  
  The distance of the effect. Defaults to either the height or width of the elemenet depending on the direction argument. Can be set to any integer less than the width/height of the element.

Example:

Toggle a div using the slide effect.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>slide demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <style>
    #toggle {
        width: 100px;
        height: 100px;
        background: #ccc;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
    $( "#toggle" ).toggle( "slide" );
});
</script>
 
</body>
</html>

Slide Effect

slide

Toggle a div using the slide effect.

Demo: