jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
The slide effect
The slide effect is very similar to the drop effect. The only difference is that with slide the
opacity of the target element is not adjusted at all. It's also very similar to the slide family of
effects exposed by jQuery itself, although with the jQuery UI slide effect, we're not restricted
to the vertical axis—we can slide horizontally too.
Configuration options
The slide effect has three configuration options which let us specify the direction and
distance of the slide, and whether it is shown or hidden:
Option Default Usage
direction "left" Sets the direction the animation proceeds in.
distance The width of the target
element, including padding
Sets the distance that the target element slides to.
mode "show" Sets whether the element is displayed or hidden
when used with the effect() method. Other
acceptable values are hide, effect, and toggle.
Time for action – sliding elements in and out of view
Displaying captions when a visitor hovers over an image is an interactive and interesting way
of displaying additional information about the image without making your design appear
cluttered. With the slide effect we can easily animate the showing and hiding of the caption,
which is what we'll do in this example.
1. Add the following code to of the template file:
Praying Mantis: Mantis religiosa
2. Then at the bottom of the page, in the empty function, add the following
short script:
$("#image").hover(function() {
$(this).find("div").stop(true, true).show("slide");
}, function() {
$(this).find("div").stop(true, true).hide("slide");
});
[ 168 ]