jQuery in Action
150
CHAPTER 5
Sprucing up with animations and effects
NOTE
We did a little more work than we needed to in this animation, so we could
demonstrate doing something that needs to wait until the animation is
complete in the callback function. If we were to specify the value of the
opacity property as
demonstrate doing something that needs to wait until the animation is
complete in the callback function. If we were to specify the value of the
opacity property as
hide
rather than
0
, the removal of the element(s)
at the end of the animation would be automatic, and we could dispense
with the callback.
with the callback.
Now let's try one more type of "make it go away" effect for good measure.
5.3.3 A custom puff animation
Rather than dropping elements off the page, let's say that we want an effect that
makes it appear as if the element dissipates away into thin air like a puff of smoke.
To animate such an effect, we combine a scale effect with an opacity effect, grow-
ing the element while fading it away. One issue we need to deal with for this effect
is that this dissipation would not fool the eye if we let the element grow in place
with its upper-left corner anchored. We want the center of the element to stay
in the same place as it grows, so we need to adjust the position of the element, in
addition to its size, as part of the animation.
makes it appear as if the element dissipates away into thin air like a puff of smoke.
To animate such an effect, we combine a scale effect with an opacity effect, grow-
ing the element while fading it away. One issue we need to deal with for this effect
is that this dissipation would not fool the eye if we let the element grow in place
with its upper-left corner anchored. We want the center of the element to stay
in the same place as it grows, so we need to adjust the position of the element, in
addition to its size, as part of the animation.
The code for our puff effect is
$('.animateMe').each(function(){
var position = $(this).position();
$(this)
.css({position:'absolute',top:position.top,
left:position.left})
.animate(
{
opacity: 'hide',
width: $(this).width() * 5,
height: $(this).height() * 5,
top: position.top - ($(this).height() * 5 / 2),
left: position.left - ($(this).width() * 5 / 2)
},
'normal');
});
In this animation, we decrease the opacity to 0 while growing the element to five
times its original size and adjusting its position by half that new size, resulting in
the position of the center of the element remaining constant. We don't want the
elements surrounding the animated element to be pushed out while the target
element is growing, so we take it out of the flow by changing its position to
times its original size and adjusting its position by half that new size, resulting in
the position of the center of the element remaining constant. We don't want the
elements surrounding the animated element to be pushed out while the target
element is growing, so we take it out of the flow by changing its position to
abso-
lute
and explicitly setting its position coordinates.