Intro

We've learned that jQuery likes to work off of methods. These methods perform different duties and one of these duties is controlled by a group of methods called, jQuery Effect Methods. These methods are built in and provide different types of functionality commonly referred to as "animations".

More information on these jQuery Effect Methods can be found here.

show / hide

The first animation methods we want to discuss are the show / hide method. Now most programmers would not consider show and hide as an animation. After all, we already know how to do this in CSS with display: none; and display: block; but jQuery considers it's version as an animation effect.

As we would expect, show will "show" and element, and hide will "hide" an element. We can demonstrate this with an HTML page with on <h1> element.

• HTML
• <h1>An H1 Element</h1>

• jQuery
• $("h1").hide();

Show / Hide effects

• show / hide
  • show: shows the element
  • hide: hides the element
  • toggle: toggles the display of the element
• fade
  • fadeIn: fades the element in
  • fadeOut: fades the element out
  • fadeToggle: toggles the element in & out
• slide
  • slideUp: slides the element up
  • slideDown: slides the element down
  • slideToggle: toggles the slide effect up & down

animate

The animate method allows us to create our own "custom" animation effects. More information on this can be found here.

The basic syntax for animate is:

• $(element).animate( {styles}, speed, easing, callback);

Now it's important to understand that we can only animate things with a numeric value. For example margin, size, opacity, etc. If we try to say animate color from red to blue, it will not work. You'll get an error, because this is not a numeric change.

So we could take our <h1> from above and say:

• jQuery
• $("h1").animate( {opacity: 0.5} );
• $("h1").animate( {margin: 10} );
• $("h1").animate( {margin: "10%"} ); // to make a % write it as a string

chaining

Another thing we can do is chain animations together. Say we want our <h1> to slideUp, then slideDown, and finally change the opacity to 0.5. We can chain these animations together, like so:

• jQuery
• $("h1") . slideUp() . slideDown() . animate( { opacity: 0.5} );