# jQuery UI Slide Effect

## Overview

Slides the element out of the viewport.

### Dependencies

- Effects Core

### Example

- Demo
- View Source

Hides the element by sliding it down.

    $("div").click(function () {
          $(this).hide("slide", { direction: "down" }, 1000);
    });

    <!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <style type="text/css">
      div { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
    </style>

      <script>
      $(document).ready(function() {

    $("div").click(function () {
          $(this).hide("slide", { direction: "down" }, 1000);
    });

      });
      </script>
    </head>
    <body style="font-size:62.5%;">
      <div></div>
    </body>
    </html>

## Arguments

- ### direction

  Type:
    String
  Default:
    "left"

  The direction of the effect. Can be "left", "right", "up", "down".

- ### distance

  Type:
    Integer
  Default:
    el.outerWidth

  The distance of the effect. Is set to either the height or width of the elemenet depending on the direction option. Can be set to any integer less than the width/height of the element.

- ### mode

  Type:
    String
  Default:
    "show"

  The mode of the effect. Can be "show" or "hide".