Adding the drop effect to elements

The drop effect is simple. Elements appear to drop off (or onto) the page, which is simulated by adjusting the element's position and opacity values.

This effect exposes the following configurable options:

Option	Default value	Use
direction	"left"	Sets the direction of the drop
distance	The outer width or height of the element (depending on the direction) divided by 2	Sets the distance the element drops
easing n	one	Sets the easing function used during the animation
mode	"hide"	Sets whether the element is hidden or shown

There are many situations in which the drop effect would be useful, but the one that instantly springs to mind is when creating custom tooltips. We can easily create a tooltip that appears when a button is clicked, but instead of just showing the tooltip, we can drop it onto the page. We'll use the button widget and the position utility in this example, as well as the effect.

Add a link to the CSS framework file...