Scripting and Applications - Web Standards: Mastering HTML5, CSS3, and XML - page 216

// Slide down
$("#DivID").slideDown(1000);
// Perform an action after the animation is completed
$("#DivID").slideDown(1000, function () {
alert("Slide Down Complete");
});
Fade Functions
jQuery has the fadeIn , fadeOut , and fadeTo functions to fade an element in or out, or fade it to a specified style
(Listing 6-39).
Listing 6-39. Fade an Element in, out, and to
// Fade in
$("#DivID").fadeIn(1000);
// Perform an action after the animation is completed
$("#DivID").fadeIn(1000, function () {
alert("Fade In Complete");
});
// Fade out
$("#DivID").fadeOut(1000);
// Perform an action after the animation is completed
$("#DivID").fadeOut(1000, function () {
alert("Fade Out Complete");
});
// Fade to (fades to specified opacity)
$("#DivID").fadeTo(1000, 0.25);
// Perform an action after the animation is completed
$("#DivID").fadeTo(1000, 0.25, function () {
alert("Fade To Complete");
});
Animation Functions
Markup elements can be animated by changing the value of their CSS properties with animate (Listing 6-40).
Listing 6-40. Animation with jQuery
$("#DivID").animate({ opacity: 0.75 }, 1000);
// Perform an action after the animation is completed
$("#DivID").animate({ opacity: 0.75 }, 1000, function () {
alert("Opacity Animation Complete");
});