Time for action – showing and hiding with fadeToggle()

As before, we first create the HTML markup and CSS styling required by the example.

  1. Open up a new copy of the template file and add the following code to the <body> of the page:
    <form>
  <label for="name">Enter your name:
    <input id="name" name="name" type="text">
    <span id="help"></span>
    <span id="helpText">Your name. You know, the thing that people call you by</span>
  </label>
</form>
  2. Save this page as fadeToggle.html. Next we need to add a few styles. In a new page in your text editor, add the following code:
    form { width:280px; margin:100px auto; position:relative; } input { margin-left:5px; } #help { display:block; width:16px; height:16px; margin-top:3px; float:right; cursor:pointer; background:url(../img/help.png) ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial