jQuery in Action
148
CHAPTER 5
Sprucing up with animations and effects
Let's try our hand at writing a few more custom animations.
5.3.1 A custom scale animation
Consider a simple scale animation in which we want to adjust the size of the ele-
ments to twice their original dimensions. We write such an animation as
ments to twice their original dimensions. We write such an animation as
$('.animateMe').each(function(){
$(this).animate(
{
width: $(this).width() * 2,
height: $(this).height() * 2
},
2000
);
});
To implement this animation, we iterate over all the elements in the wrapped set
via
via
each()
to apply the animation individually to each matched element. This is
important because the property values that we need to specify for each element
are based upon the individual dimensions for that element. If we always knew
that we'd be animating a single element (such as if we were using an
are based upon the individual dimensions for that element. If we always knew
that we'd be animating a single element (such as if we were using an
id
selector)
or applying the exact same set of values to each element, we could dispense with
each()
and animate the wrapped set directly.
Within the iterator function, the
animate()
command is applied to the ele-
ment (identified via
this
) with style property values for
width
and
height
set to
double the element's original dimensions. The result is that over the course of
two seconds (as specified by the
two seconds (as specified by the
duration
parameter of
2000
), the wrapped ele-
ments (or element) will grow from their original size to twice that original size.
Now let's try something a bit more extravagant.
5.3.2 A custom drop animation
Let's say that we want to conspicuously animate the removal of an element from
the display, perhaps because it's vitally important to convey to users that the item
being removed is gone and that they should make no mistake about it. The anima-
tion we'll use to accomplish this will make it appear as if the element drops off the
page, disappearing from the display as it does so.
the display, perhaps because it's vitally important to convey to users that the item
being removed is gone and that they should make no mistake about it. The anima-
tion we'll use to accomplish this will make it appear as if the element drops off the
page, disappearing from the display as it does so.
If we think about it for a moment, we can figure out that, by adjusting the
top
position of the element, we can make it move down the page to simulate the drop;
adjusting the
adjusting the
opacity
will make it seem to vanish as it does so. And finally, when
all that's done, we want to remove the element from the display (similar to the
animated
animated
hide()
).