Frequently used effects are built into jQuery as methods:
-
$.fn.show
-
Show the selected element.
$.fn.hide
-
Hide the selected elements.
$.fn.fadeIn
-
Animate the opacity of the selected elements to 100%.
$.fn.fadeOut
-
Animate the opacity of the selected elements to 0%.
$.fn.slideDown
-
Display the selected elements with a vertical sliding motion.
$.fn.slideUp
-
Hide the selected elements with a vertical sliding motion.
$.fn.slideToggle
-
Show or hide the selected elements with a vertical sliding motion, depending on whether the elements are currently visible.
With the exception of $.fn.show
and $.fn.hide
, all of the built-in methods are animated over the course of 400ms by default. Changing the duration of an effect is simple.
jQuery has an object at jQuery.fx.speeds
that contains the default speed, as well as settings for"slow"
and "fast"
.
speeds: { slow: 600, fast: 200, // Default speed _default: 400 }
It is possible to override or add to this object. For example, you may want to change the default duration of effects, or you may want to create your own effects speed.
Often, you'll want to run some code once an animation is done -- if you run it before the animation is done, it may affect the quality of the animation, or it may remove elements that are part of the animation. [Definition: Callback functions provide a way to register your interest in an event that will happen in the future.] In this case, the event we'll be responding to is the conclusion of the animation. Inside of the callback function, the keyword this
refers to the element that the effect was called on; as we did inside of event handler functions, we can turn it into a jQuery object via$(this)
.
Note that if your selection doesn't return any elements, your callback will never run! You can solve this problem by testing whether your selection returned any elements; if not, you can just run the callback immediately.
jQuery makes it possible to animate arbitrary CSS properties via the $.fn.animate
method. The$.fn.animate
method lets you animate to a set value, or to a value relative to the current value.
Note
Color-related properties cannot be animated with $.fn.animate
using jQuery out of the box. Color animations can easily be accomplished by including the color plugin. We'll discuss using plugins later in the book.
[Definition: Easing describes the manner in which an effect occurs -- whether the rate of change is steady, or varies over the duration of the animation.] jQuery includes only two methods of easing: swing and linear. If you want more natural transitions in your animations, various easing plugins are available.
As of jQuery 1.4, it is possible to do per-property easing when using the $.fn.animate method.
jQuery provides several tools for managing animations.
-
$.fn.stop
-
Stop currently running animations on the selected elements.
$.fn.delay
-
Wait the specified number of milliseconds before running the next animation.
$('h1').show(300).delay(1000).hide(300);
jQuery.fx.off
-
If this value is true, there will be no transition for animations; elements will immediately be set to the target final state instead. This can be especially useful when dealing with older browsers; you also may want to provide the option to your users.
-