HTML and CSS Reference
In-Depth Information
It can be a little jarring when elements just appear or disappear instantly. Most JavaScript
libraries, including jQuery, provide a library of effects that enable you to animate transi-
tions on the page when items appear, disappear, or move. jQuery has a few basic effects
built in to the core library. Supplemental effects are also available as part of jQuery UI,
which you can obtain at
http://jqueryui.com/.
The four effects that are part of jQuery are fade in, fade out, slide up, and slide down.
I'm going to build on the previous example to show you how they can be used to soften
the transitions when you add items to the page or remove items from it. Adding the
effects to the page just requires a few small tweaks to the event handlers that I already
created.
The first effect I added applies the fade-out effect when users click a list item to remove
it. To cause an element to fade out, you call the
fadeOut()
method on the results of a
selector that matches that element. Here's the code:
$(“#editable li”).live('click', function () {
$(this).fadeOut('slow', function() { $(this).remove() });
});
When you call
fadeOut()
, it sets the
display
property for the element to
none
—essen-
tially, it's a fancy replacement for
hide()
. Figure 16.14 shows a list item that's in the
process of fading out.
FIGURE 16.14
The jQuery fade-
out effect in
progress.
In this case, I want to actually remove the element from the page entirely. To do so, I
need a callback, which is included as the second argument to
fadeOut()
. The callback is
run whenever the animation is complete, and in this case, removes the element from the
page. The first argument is used to specify the speed of the animation. Setting it to
slow
