Slide Effect

Categories: Effects

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slide demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/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>

Demo: