Slide effect

Slides the element out of the viewport.

slide

direction (default: "both")

String

The direction of the effect. Possible values: "left", "right", "up", "down".

distance (default: element's outerWidth)

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.

Examples:

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.11.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.11.4/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>

Links:

http://api.jqueryui.com/slide-effect

doc_jQuery

2025-01-10 15:47:30

Comments