Implementing the sliding effect

The remaining effects of the jQuery UI library all work by showing and hiding elements in different ways, rather than using opacity like most of the effects we have already looked at.

The slide effect is no exception and shows (or hides) an element by sliding it into (or out of) view. It is similar to the drop effect that we just looked at. The main difference is that it does not use opacity.

The slide effect contains the following configuration options:

Option	Default value	Use
direction	"left"	Sets the direction of the slide
distance	The outer width or height of the element (depending on the direction)	Sets the distance the element slides
easing	none	Sets the easing function used during the animation
mode	"show"	Sets whether the element is hidden or shown

These are the same configuration options used by the drop effect that we looked at in the previous example, except that some of the default values are different.

For our next example...