jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
Configuration options
The drop effect allows us to control the direction that the element drops, and whether it is
shown or hidden:
Option Default Usage
direction "left" Sets the direction that the element drops in or out of the page.
The other option is the string right.
mode "hide" Sets whether the element is shown or hidden when using the
effect() method. Other possible values include show,
toggle, and effect.
Time for action – using the effect
The social networking site Twitter introduced a novel effect whereby the system reports
actions to the visitor by displaying a message that drops down at the top of the page.
We can easily replicate this behavior using the drop effect.
1. Add the following markup to the of our template page:
Your request has been completed!
2. Now at the bottom of the page add the following code:
$("#confirmation").effect("drop", {
mode: "show",
direction: "up"
}, function() {
var timer = function() {
$("#confirmation").effect("drop", { mode: "hide", direction:
"up"});
}
setTimeout(function() { timer() }, 3000);
});
3. Save the page as drop.html. We only need a few styles for this example. Create
the following very basic stylesheet:
body { background-color:#3cf; }
#confirmation {
display:none width:100%; height:60px; position:absolute; top:0;
left:0; z-index:999; background-color:#fff; text-align:center;
font:normal 18px "Nimbus Sans L", "Helvetica Neue", "Franklin
[ 160 ]