jQuery in Action
142
CHAPTER 5
Sprucing up with animations and effects
using the Fade In and Fade Out selections (don't worry about Fade To for now,
we'll attend to that soon enough).
we'll attend to that soon enough).
It's important to note that when the opacity of an element is adjusted, the
jQuery
hide()
,
show()
,
fadeIn()
, and
fadeOut()
effects remember the original
opacity of an element and honor its value. In the lab page, we purposefully set the
initial opacity of the image at the far right to 50 percent before hiding it.
Throughout all the opacity changes that take place when applying the jQuery
effects, this original value is never stomped on.
initial opacity of the image at the far right to 50 percent before hiding it.
Throughout all the opacity changes that take place when applying the jQuery
effects, this original value is never stomped on.
Run though additional exercises in the lab until you're convinced that this is so
and are comfortable with the operation of the fade effects.
Another effect that jQuery provides is via the
fadeTo()
command. This effect
adjusts the opacity of the elements like the previously examined fade effects, but
never removes the elements from the display. Before we start playing with
never removes the elements from the display. Before we start playing with
fadeTo()
in the lab, here's its syntax.
Unlike the other effects that adjust opacity while hiding or revealing elements,
fadeTo()
doesn't remember the original opacity of an element. This makes sense
because the whole purpose of this effect is to explicitly change the opacity to a
specific value.
specific value.
Bring up the lab page, and cause all elements to be revealed (you should know
how by now). Then work through the following exercises:
Command syntax: fadeTo
fadeTo(speed,opacity,callback)
Adjusts the opacity of the wrapped elements from their current setting to the new setting
specified by opacity.
specified by opacity.
Parameters
speed
(Number|String) Specifies the duration of the effect as a number of millisec-
onds or as one of the predefined strings: slow, normal, or fast. If omitted, the
default is normal.
onds or as one of the predefined strings: slow, normal, or fast. If omitted, the
default is normal.
opacity
(Number) The target opacity to which the elements will be adjusted specified
as a value from 0.0 to 1.0.
as a value from 0.0 to 1.0.
callback
(Function) An optional function invoked when the animation completes. 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.