Slide Effect

Description: Slides the element out of the viewport.

slide
- direction (default: "left")
  
  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 element 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="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/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>

W3cubDocs

Slide Effect

Slide Effect

slide

Example:

Demo: