Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS
Alternatively, .fadeTo() allows you to specify the opacity to which the element should fade. This
method requires two arguments: a duration and the opacity to which the element show fade (a number
between 0 and 1). An optional callback can be passed as the third argument as well.
Fade the form to 50 percent opacity and log a message using the following:
$("form")
.fadeTo(1000, 0.5, function(){
console.log("Faded to 50%!");
});
.slideUp(), .slideDown(), and .slideToggle()
To hide an element by reducing its height to 0, .slideUp() is a shortcut method. It animates the
reduction of the element’s height until it reaches 0 and then sets display:none; to ensure the layout is
no longer affected by the element. To reverse this, the .slideDown() method removes the display:none;
and animates the height from 0 back to the original height of the element.
Just like .fadeIn() and .fadeOut(), two optional parameters are accepted: the duration and a
callback function.
Slide up the paragraph with class foo, log a message, slide it back down, and log another message:
$("p.foo")
.slideUp(1000, function(){
console.log("Hidden!");
})
.slideDown(1000, function(){
console.log("Shown!");
});
The .slideToggle() method does the same thing as .slideUp() and .slideDown(), but it’s smart
enough to know if an element is hidden or shown and uses that information to determine which action
to take.
To set up a display toggle for the paragraph with class foo, use the following:
$("p.foo")
.slideToggle("slow", function(){
console.log("Toggled!");
});
By running this code multiple times, you’ll see the paragraph slide up and down in alternating
fashion.
.animate()
The previously discussed animation methods are shortcuts that all call the .animate() method. This
method will animate most visual CSS properties of an element and supports easing, which is one of any
number of mathematical formulas that alter the way the animation operates. By default, "linear" and
"swing" easing are supported, but an easy-to-include easing plug-in is available for jQuery (you’ll learn
about plug-ins later in this book).
67