Web Development with jQuery®

(^242) ❘ CHAPTER 8 ANIMATION AND EASING EFFECTS
➤ (^) start function((promise) animation) —A callback function that is executed when the
animation starts.
➤ (^) done function((promise) animation, (Boolean) jumpedToTheEnd) —A callback function that
is executed when the animation has completed and its Promise object has been resolved.
➤ (^) fail function((promise) animation, (Boolean) jumpedToTheEnd) —A callback function that
is executed when the animation fails to be completed and its Promise object has
been rejected.
➤ (^) always function((promise) animation, (Boolean) jumpedToTheEnd) —A callback function
that is executed when the animation has been completed or stops without completing and its
Promise object has either been resolved or rejected.

Summary

In this chapter, you learned how jQuery’s animation methods work to hide, display, or transition

elements, either by using jQuery’s various built-in animations or by making a custom animation.

You learned how jQuery’s hide(), show(), and toggle(), as well as all seven additional animation-

related methods, can be provided a duration argument, which can be either a string 'slow', 'normal',

or 'fast', or an integer representing time specifi ed in milliseconds. When used without any

arguments specifi ed, jQuery’s show(), hide(), and toggle() methods simply show and hide an element

by toggling the CSS display property without an animation. Specifying at least the one argument

causes these methods to use an animation to transition between the hidden and displayed states.

jQuery offers some alternative animations that essentially provide the same functions as the show(),

hide(), and toggle() methods. The slideDown(), slideUp(), and slideToggle() methods animate an

element’s height to hide and display an element. The fadeIn(), fadeOut(), and fadeToggle() methods

animate an element’s opacity to hide and display an element.

Finally, you learned how to use the animate() method, which transitions between the styles an ele-

ment already has to styles that you specify in the fi rst argument to the animate() method. The styles

that can be animated are all of the various CSS properties that allow numeric values.

jQuery effects are documented in detail in Appendix M, “Animation and Easing Effects.”

EXERCISES

1. When specifying the duration of an animation, what values are allowed?


2. What does jQuery’s slideDown() method do?


3. Which methods would you use to display or hide an element using an animation of that ele-
   ment’s opacity?


4. What method would you use to create a custom animation?


5. Which easings are provided with jQuery core?

http://www.it-ebooks.info