jQuery 1.4 Animation Techniques - Index of

Fading Animations
4. Save this in the css folder as fadeOut.css. To perform the fadeOut() animation,
we'll need just a tiny bit of JavaScript. Inside the anonymous function in the second
element at the bottom of the , add the following code:
$("#overlay button").click(function() {
$("#overlay").fadeOut(500, function() {
$(this).remove();
});
});
What just happened?
In our code, we attach a click handler to the using jQuery's click() helper
method. The anonymous function we specify as an argument is executed whenever
the button is clicked. Within this function we select the dialog using its id and call the
fadeOut() method on it using a numerical argument of 500 milliseconds instead of one
of the acceptable strings.
We also specify a callback function as the second argument to the fadeOut() method.
As there is only a single element in the selection (the element with an id of overlay),
this function will be executed only once. Inside this callback function, the this keyword
is set to the current element, so we can easily manipulate it from within the callback.
All the function does is remove the dialog from the DOM. This behavior would be
appropriate when the element to be removed was a one-time-only dialog that would either
not be shown again during the current session, or would be generated again from scratch by
the system when required.
We'll see the dialog when we load the page. In a proper implementation, it would probably
be centered in the viewport and be absolutely positioned so that it appears to float above
the page (additionally the CSS3 shadow that we used would reinforce this impression).
It would also more than likely be modal, so the underlying page would be obscured, or
otherwise shielded from interaction, until the dialog is closed.
To avoid unnecessary cluttering of the example however, our dialog is alone on an empty
page. Clicking the will cause the dialog to fade away and then be removed from
the page.
The animation is fairly quick and less jarring than instantaneous removal of the dialog,
but I should point out that fading animations can often annoy users if they are too frequent,
take too long to complete, or are felt to be completely unnecessary.
[ 30 ]