jQuery 1.4 Animation Techniques - Index of

[ 143 ]
Chapter 6
The highlight effect
The highlight effect is a simple but effective way to draw the visitor's attention to new items
that have been added to the page, and is used for this purpose in many of today's leading
web-based interfaces.
Configuration options
There are only two configuration options for the highlight effect; these are listed as follows:
Options Default Usage
color "#ffff99" Sets the background-color of the element being highlighted.
mode "show" Sets whether the effect will be hidden or shown when used with the
effect() method. Other possible values include hide, toggle,
or effect.
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 of the template file:
Todo List
Item 1
Item 2
Item 3
Add
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 = $(""),
label = $("").html(
"" + text).appendTo(li);