jQuery 1.4 Animation Techniques Beginner's Guide

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):

   <fieldset>
     <legend>Login Form</legend>
     <label for="username">Username:<input name="username" id="username"></label>
     <label for="password">Password:<input name="password" id="password" type="password"></label>
     <input name="remember" id="remember" type="checkbox"><label for="remember">Remember me:</label>
     <a id="cancel" href="#" title="Cancel">Cancel</a>
     <button type="submit">Login</button>
   </fieldset>

2. Save the new file as slideUp.html.
3. We'll also need some ...