jQuery 1.4 Animation Techniques - Index of

Sliding Animations
Time for action – sliding elements up
Let's build on the previous example so that the form slides back up out of view if a cancel
link is clicked. We can add this link to the underlying markup for the page:
1. In slideDown.html, change the form so that it appears as follows
(new code is highlighted):
Login Form
Username:
Password:
Remember me:
Cancel
Login
2. Save the new file as slideUp.html.
3. We'll also need some more styles in order to stop our new link from picking up
the styling of the login link. At the end of the slideDown.css stylesheet, add
the following new selectors and rules:
header ul li a#cancel {
margin:0; padding:0; position:absolute; bottom:14px; left:10px;
font-size:11px; color:#993333;
}
header ul li a#cancel:hover, header ul li a#cancel:focus {
border:none; text-decoration:underline; color:#ff0000;
}
4. Save the updated file in the css folder as slideUp.css, and update the
in the of slideUp.html to point to the new stylesheet.
5. To add the new behavior, update the at the bottom of the page so that it
includes the following new code:
$("#cancel").click(function(e) {
e.preventDefault();
$(this).closest("form").slideUp(function() {
[ 80 ]