Another set of effects that hide or show elements—slideDown() and slideUp()—also works in a similar manner to the hide() and show() effects, except that the elements appear to slide down from their tops when being revealed and to slide up into their tops when being hidden, and without parameters they are animated.
Like the previous set of effects, the slide effects have a related method that will toggle the elements between hidden and revealed: slideToggle(). The by now familiar syntaxes for these methods follow.
| Method syntax: slideDown |
|---|
| slideDown(duration[, easing][, callback]) slideDown(options) slideDown() |
| Causes any matched elements that are hidden to be shown by gradually increasing their height. Only hidden elements are affected. |
| Returns |
| The jQuery collection. |
| Method syntax: slideUp |
|---|
| slideUp(duration[, easing][, callback]) slideUp(options) slideUp() |
| Causes any matched elements that are displayed to be removed from the display by gradually decreasing their height. |
| Returns |
| The jQuery collection. |
Except for the manner in which the elements are revealed and hidden, these effects act similarly to the other show and hide effects. Convince yourself of this by displaying the jQuery Effects Lab Page and running through experiments like those you applied using the other effects.
Stopping animations
You may have a reason now and then to stop an animation once it has started. This could be because a user event dictates that something else should occur or because you want to start a completely new animation. The stop() method will achieve this for you.
| Method syntax: stop | |
|---|---|
| stop([queue][, clearQueue[, goToEnd]]) | |
| Stops any animation that’s currently in progress for the elements in the jQuery object. | |
| Parameters | |
| queue | (String) The name of the queue in which to stop animations (we’ll get to that shortly). |
| clearQueue | (Boolean) If specified and set to true, stops not only the current animation but any other animations waiting in the animation queue. The default value is false. |
| goToEnd | (Boolean) If specified and set to true, completes the current animation immediately (as opposed to merely stopping it). The default value is false. |
| Returns | |
| The jQuery collection. | |
When using the stop() method, keep in mind that any change that has already taken place for any animated elements will remain in effect. In addition, if you call stop() on a set when jQuery is performing an animation like slideUp() and the animation isn’t completed, a portion of the elements will still be visible on the page. If you want to restore the elements to their original states, it’s your responsibility to change the CSS values back to their starting values using jQuery’s css() method or a similar method.
You can avoid having elements with only part of the animation completed by passing true as the value of the goToEnd parameter. If you want to remove all the animations in the queue and set the CSS properties as if the current animation was completed, you have to call stop(true, true). By specifying the current animation, we mean that if you’ve chained three animations and while the first is still running you call stop(true, true), the style of the elements will be set as if the first animation was completed and the other two were never run (they’re removed from the queue before being performed).
In some cases, when stopping an animation you also want to set the CSS properties as if all the animations were completed. In such situations you can use finish().
| Method syntax: finish | |
|---|---|
| finish([queue]) | |
| Stops the animation that’s currently in progress for the elements in the jQuery object, removes all the animations in the queue (if any), and immediately sets the CSS properties to their target values. | |
| Parameters | |
| queue | (String) The name of the queue in which to stop animations. If not specified, the fx queue is assumed, which is the default queue used by jQuery. |
| Returns | |
| The jQuery collection. | |
To help you visualize the main difference between stop() and finish(), we’ve created a demo that you can find in the file lesson-8/stop.vs.finish.html and that’s also available as a JS Bin.
In addition to these two methods, there’s also a global flag called jQuery.fx.off that you can use to completely disable all animations. Setting this flag to true will cause all effects to take place immediately without animation. Another jQuery flag that deals with animations is jQuery.fx.interval. We’ll cover these flags and why you’d want to use them formally in lesson 9 when we also discuss the other jQuery flags provided by jQuery.
Now that you’ve seen the effects built into the core of jQuery, let’s investigate writing your own!
Leave a Reply