Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

Special Effects 519

18

I’ve also updated the event handler for the Clear List link. In this case, I use the slide-up
effect, shown in Figure 18.15, when the list is cleared. Here’s th e updated event handler:

$("#clearList").click(function (event) {
event.preventDefault();
$("#editable").slideUp('slow', function () {
$("#editable").empty()
$("#editable").show();
});
});

The changes here are similar to those for the previous event handler. After the animation
is complete and the list is hidden, I call the empty() method to remove the contents of the
list and then call show() on the now hidden list so that when the user adds new elements
to it, the list will be visible.

FIGURE 18.14
The jQuery fade-out
effect in progress.

FIGURE 18.15
The jQuery slide-up
effect.