jQuery 1.4 Animation Techniques - Index of

Sliding Animations
What just happened?
The underlying structures we've placed on the page are pretty straight-forward. To
summarize, we basically have two tables, one of which is wrapped in a , and an outer
container for the whole collection of elements. The table that is wrapped will be hidden
when the basket is collapsed. We also have a link at the top of the container which will show
or hide the basket contents.
Our JavaScript code is divided into two main sections. In the first section, we cache some
jQuery selectors that we'll use a couple of times in the code to save from selecting them one
at a time, each time they are required.
We also define a function that we can call whenever we need to change the value of the
toggling link. The function sets the text of the link using an anonymous function which
returns the new text to add. This is passed to the index of the element in the collection on
which the text() method was called as the first argument and the second is the original
text of the element. We don't need the first argument but we must specify it in order to
access the second argument.
The second part of the code is the click handler for the toggle link. It checks that the
containing the first is not already being animated and if not, it calls the
slideToggle() method, which will either slide the basket open or closed depending on its
current state. We use the callback function to update the text of the link once the animation
is complete.
The: animated filter
Checking whether an element is already being animated using the :animated
filter is a quick and easy alternative to the stop() method in the previous
example in that it only applied the animation if the element was not already
animated and therefore prevented a build-up of animations.
Have a go hero – doing more with slideToggle
Have a go at reworking the code so that it uses the slideDown() and slideUp() methods
instead of the slideToggle(). It won't make the code any more efficient, but you should
get to see roughly how much code the slideToggle() method can save you.
[ 88 ]