jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
}
});
li.appendTo("#todo ul").effect("highlight", 2000);
newItem.val("");
3. Save this page as highlight.html. We also need some CSS for this example. In a
new file in your text editor add the following code:
#todo {
width:208px;
font:normal 13px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif;
}
#todo ul { padding:0; margin-bottom:30px; }
#todo li { list-style-type:none; }
#todo label { display:block; border-bottom:1px dotted #000; }
li input { position:relative; top:2px; }
input { margin-right:10px; }
4. Save this page as highlight.css.
5. When we run the page in a browser, we can add a new item and it will be
highlighted briefly as the new item is added to the list:
In the previous screenshot we see the fade effect before it fades away from the newly
added item.
[ 144 ]