Built-in jQuery Animations

We have a short and sweet podcast today reviewing the animations that come built into jQuery. Of course, jQuery will allow you to create your own custom animations, and we’ll cover just how to do that in a future episode. But today, we’re just going to take a look at the animations that are included out-of-the-box.

We’ll set up a few definition lists to display our different animations, which include:

• show(), hide(), and toggle()
• slideUp(), slideDown(), and slideToggle()
• fadeIn(), fadeOut(), and fadeToggle()
• fadeTo()

After creating our simple HTML file, we add just a few super simple styles to our CSS page that will make the animations easier to see. Then we step into looking at what each of the animation methods does. First up, show() and hide() just toggle the display of the item to make it disappear from and appear on the page. There’s also the handy toggle() method that alternates between hiding and showing the target element.

Next, we take a look at the sliding animations, which we made good use of in our Accordion episode last week. We learn how to use slideUp() and slideDown(), and then, of course, slideToggle() to alternate between showing and hiding the target element.

Finally, we’ll play with fading animations. We take a look at fadeIn(), fadeOut() and fadeToggle(). Then, we take a look at one bonus fading animation – fadeTo() – that’s included with jQuery that allows us to fade an item to a specified opacity at whatever speed we choose.

You’ll find lots of uses for these default animations that are included with jQuery. Have fun experimenting and learning more about them!