jQuery in Action

Animating the display state of elements
135
Note that we no longer need the conditional statement to determine whether to
hide or show the elements;
toggle()
takes care of swapping the displayed state.
We still use the
.is(':hidden')
test as part of a simpler ternary expression to
determine the appropriate image to use for the item marker.
Instantaneously making elements appear and disappear is handy, but some-
times we want the transition to be less abrupt. Let's see what's available for that.
5.2 Animating the display state of elements
Human cognitive ability being what it is, making items pop into and out of exist-
ence instantaneously can be jarring to us. If we blink at the wrong moment, we
could miss the transition, leaving us to wonder, "What just happened?"
Gradual transitions of a short duration help us know what's changing and how
we got from one state to the other. And that's where the jQuery core effects come
in, of which there are three sets:
Show and hide (there's a bit more to these commands than we let on in sec-
tion 5.1)
Fade in and fade out
Slide down and slide up
Let's look more closely at each of these effect sets.
5.2.1 Showing and hiding elements gradually
The
show()
,
hide()
, and
toggle()
commands are more complex than we led you
to believe in the previous section. When called with no parameters, these com-
mands effect a simple manipulation of the display state of the wrapped elements,
causing them to instantaneously be revealed or hidden from the display. But
when passed parameters, these effects can be animated so that their changes in
display status take place over a period of time.
Now we're ready to look at the full syntaxes of these commands.








Другие страницы

 
Cкачать книги бесплатно без регистрации в электронном виде (pdf, chm, txt).Вы можете читать книги онлайн на нашем сайте литературного портала книг.Большая подборка учебников, пособий, интересных книг.Электронные книги на английском языке скачать бесплатно без смс.