HTML and CSS Reference
In-Depth Information
means that it will take 600 milliseconds to complete. By default, the animation takes
400 milliseconds. You can also set it to
fast
(200 milliseconds), or you can enter a
number of milliseconds yourself.
I've also updated the event handler for the Clear List link. In this case, I use the slide-up
effect, shown in Figure 16.15, when the list is cleared. Here's the updated event handler:
$(“#clearList”).click(function (event) {
event.preventDefault();
$(“#editable”).slideUp('slow', function () {
$(“#editable”).empty()
$(“#editable”).show();
});
16
});
FIGURE 16.15
The jQuery slide-up
effect.
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 ele-
ments to it, the list will be visible.
Finally, I want the new items I add to the list to fade in rather than just appearing. Here's
the updated event handler with the
fadeIn()
call included:
$(“#addElement”).submit(function (event) {
event.preventDefault();
var content = “<li>” + $(“#addElement input[name='liContent']”).val() +
“</li>”;
$(content).hide().appendTo(“#editable”).fadeIn('slow').css(“display”,
“list-item”);
});
This event handler is a little bit more complex. First, I initialize a new variable with the
content to add to the page, just to make the code a little more readable. Then, I go
