jQuery in Action
Animating the display state of elements
137
Let's do a third take on the collapsible list, animating the opening and closing of
the sections.
the sections.
Given the previous information, you'd think that the only change we need
to make to the code of take 2 of this collapsible list implementation would be to
change the call to the
change the call to the
toggle()
command to
toggle('slow')
But not so fast! When we make this change and test the page, we'll notice some
weird things going on. First, recall that, in order to initially hide the collapsible
elements, we called the
weird things going on. First, recall that, in order to initially hide the collapsible
elements, we called the
click
handler of the active items. That was well and good
when all the handler did was to immediately hide the child elements. But now
we've animated that activity; when the page loads, we see the child items hiding
themselves in the animated fashion. That won't do at all!
we've animated that activity; when the page loads, we see the child items hiding
themselves in the animated fashion. That won't do at all!
We need to explicitly use the
hide()
command, without parameters, to hide
the element before the user gets a chance to see them and then to set the markers
to the plus image. You'll recall that we didn't do that in the earlier example
because it would have created repeated code. Well, with the changes we've made,
that's no longer an issue.
to the plus image. You'll recall that we didn't do that in the earlier example
because it would have created repeated code. Well, with the changes we've made,
that's no longer an issue.
The second problem we'd notice is that marker images no longer act correctly.
When the toggle action was instantaneous, we could safely check for the results of
the action immediately after it took place. Now that the toggle action is animated,
its results are no longer synchronous, and checking afterward for whether the
children are hidden or not (in order to know which image the marker should be
set to) is no longer possible.
the action immediately after it took place. Now that the toggle action is animated,
its results are no longer synchronous, and checking afterward for whether the
children are hidden or not (in order to know which image the marker should be
set to) is no longer possible.
Command syntax: toggle
toggle(speed,callback)
Performs show() on any hidden wrapped elements and hide() on any non-hidden wrapped
elements. See the syntax description of these commands for their respective semantics.
elements. See the syntax description of these commands for their respective semantics.
Parameters
speed
(Number|String) Optionally specifies the duration of the effect as a number of
milliseconds or as one of the predefined strings: slow, normal, or fast. If omit-
ted, no animation takes place.
milliseconds or as one of the predefined strings: slow, normal, or fast. If omit-
ted, no animation takes place.
callback
(Function) An optional function invoked when the animation is complete. No
parameters are passed to this function, but the function context (this) is set
to the element that was animated.
parameters are passed to this function, but the function context (this) is set
to the element that was animated.
Returns
The wrapped set.
The wrapped set.