Conclusion

This lesson introduced you to the animated effects that jQuery makes available out of the box as well as to the animate() method that allows you to create your own custom animations.

The show() and hide() methods, when used without parameters, reveal and conceal elements from the display immediately, without any animation. You can perform animated versions of the hiding and showing of elements with these methods by passing parameters that control the speed of the animation as well as providing an optional callback that’s invoked when the animation completes. The toggle() method toggles the displayed state of an element between hidden and shown.

Another set of methods, fadeOut() and fadeIn(), also hides and shows elements by adjusting the opacity of elements when removing or revealing them in the display. Similar to hide() and show(), the fade effect has a fadeToggle() method. Another method of this type, fadeTo(), animates a change in opacity for its elements without removing the elements from the display.

A final set of three built-in effects animates the removal or display of your selected elements by adjusting their height: slideUp(), slideDown(), and slideToggle().

The previous methods introduced you to the concept of easing. The term is used to describe the manner in which the processing and pace of the frames of the animation are handled. The jQuery core provides only two easing functions to keep the library light, but you can extend jQuery with other libraries or plugins, most notably the jQuery Easing plugin and the jQuery UI, to obtain a whole set of new easing functions.

In addition, jQuery gives you the opportunity to build your own custom animations using the animate() method. By using it, you can animate any CSS style property that accepts a numeric value, most commonly the opacity, position, and dimensions of the elements.

You also learned how jQuery queues animations for serial execution and how you can use the jQuery queuing methods to add your own functions to the effects queue or your own custom queues.

When we explored writing your own custom animations, you wrote the code for these custom effects as inline code within the on-page JavaScript. A much more common, and useful, method is to package custom animations as jQuery plugins. You’ll learn how to do that in lesson 12, and you’re encouraged to revisit these effects after you’ve read that lesson. Repackaging the custom effects we developed in this lesson, and any that you can think up on your own, would be an excellent follow-up exercise.

But before you write your own jQuery extensions, let’s take a look at some utility functions and flags that jQuery provides.