jQuery 1.4 Animation Techniques - Index of

[ 77 ]
Chapter 4
header form input {
display:block; width:148px; margin:-2px 0 10px 8px; float:right;
}
header form input#remember { width:auto; margin:3px 0 0 10px; }
header form button {
margin:10px -1px 0 0; float:right; clear:right;
}
4. Save this stylesheet in the css folder as slideDown.css.
5. Finally we should add the script that will enable the slide effect. Within the
anonymous function in the second element, add the following code:
$("#login").click(function(e) {
e.preventDefault();
$(this).addClass("on").next().slideDown();
});
6. When we run the page now, we should see that the hidden form slides open when
the login link is clicked: