jQuery in Action
Creating custom animations
151
Because we specify
hide
for the
opacity
value, the elements are automatically hid-
den (removed from the display) once the animation is complete.
Each of these three custom effects can be observed by loading the page at
chapter5/custom.effects.html whose display is shown in figure 5.5.
We purposefully kept the browser window to a minimum for the screen shot;
you'll want to make the window bigger when running this page to properly
observe the behavior of the effects. And although we'd love to show you how these
effects behave, screenshots have obvious limitations. Nevertheless, figure 5.6
shows the puff effect in progress.
observe the behavior of the effects. And although we'd love to show you how these
effects behave, screenshots have obvious limitations. Nevertheless, figure 5.6
shows the puff effect in progress.
We'll leave it to you to try out the various effects on this page and observe
their behavior.
Figure 5.5
Initial display of the page
that demonstrates the
three custom effects:
scale, drop, and puff
that demonstrates the
three custom effects:
scale, drop, and puff
Figure 5.6
The puff effect expands
and moves the image while
simultaneously reducing
its opacity.
and moves the image while
simultaneously reducing
its opacity.