jQuery in Action
Creating custom animations
149
We accomplish this drop effect with the following code:
$('.animateMe').each(function(){
$(this)
.css('position','relative')
.animate(
{
opacity: 0,
top: $(window).height() - $(this).height() -
$(this).position().top
},
'slow',
function(){ $(this).hide(); });
});
There's a bit more going on here than with the previous effect. We once again
iterate over the element set, this time adjusting the position and opacity of the
elements. But to adjust the
iterate over the element set, this time adjusting the position and opacity of the
elements. But to adjust the
top
value of an element relative to its original posi-
tion, we first need to change its
CSS
position
style property value to
relative
.
Then for the animation, we specify a target
opacity
of
0
and a computed
top
value. We don't want to move an element so far down the page that it moves
below the window's bottom; this could cause scroll bars to be displayed where
none may have been before, possibly distracting users. We don't want to draw
their attention away from the animation--grabbing their attention is why we're
animating in the first place! So we use the height and vertical position of the ele-
ment, as well as the height of the window, to compute how far down the page the
element should drop.
below the window's bottom; this could cause scroll bars to be displayed where
none may have been before, possibly distracting users. We don't want to draw
their attention away from the animation--grabbing their attention is why we're
animating in the first place! So we use the height and vertical position of the ele-
ment, as well as the height of the window, to compute how far down the page the
element should drop.
NOTE
In most examples in this book, we've avoided using plugins as much as
possible in order to focus on core jQuery. This doesn't always reflect real-
world situations where core jQuery is usually used along with whatever
plugins a page author needs to get the job done. The ease of writing
jQuery plugins and the rich pool of plugins that are available are two of
jQuery's greatest strengths. In this example animation (as well as the next
that we'll examine), we've employed the services of the Dimensions Plu-
gin's
possible in order to focus on core jQuery. This doesn't always reflect real-
world situations where core jQuery is usually used along with whatever
plugins a page author needs to get the job done. The ease of writing
jQuery plugins and the rich pool of plugins that are available are two of
jQuery's greatest strengths. In this example animation (as well as the next
that we'll examine), we've employed the services of the Dimensions Plu-
gin's
position()
command to determine the initial location of the ele-
ment relative to the page. We'll be looking into the Dimensions Plugin in
more detail in chapter 9 (section 9.2, to be exact).
more detail in chapter 9 (section 9.2, to be exact).
When the animation is complete, we want to remove the element from the dis-
play, so we specify a callback routine that applies the non-animated
play, so we specify a callback routine that applies the non-animated
hide()
com-
mand to the element (which is available to the function as its function context).