Time for action – highlighting elements

In this example we'll create a simple todo list, with a series of default items that can be checked off. We can also allow new items to be added to the list and will apply the highlight effect to new items as they are added.

  1. Add the following HTML to the <body> of the template file:
    <div id="todo">
  <h2>Todo List</h2>
  <ul>
    <li><label><input type="checkbox">Item 1</label></li>
    <li><label><input type="checkbox">Item 2</label></li>
    <li><label><input type="checkbox">Item 3</label></li>
  </ul>
  <input type="text" id="new"><button id="add">Add</button>
</div>
  2. Add the behavior for our todo list using the following code:
    $("#add").click(function() { var newItem = $("#new"), text = newItem.val(); if (text) { var li = $("<li>"), ...

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