jQuery 1.4 Animation Techniques - Index of

$(document).keydown(function(e) {
if (e.which === 39) {
bg.animate({ "backgroundPosition": "-=1px" }, 0, "linear");
mg.animate({ "backgroundPosition": "-=10px" }, 0, "linear" );
fg.animate({ "backgroundPosition": "-=20px" }, 0, "linear" );
}
});
[ 189 ]
Chapter 7
If we run this page in a browser now, we should find that as we hold down the right arrow
key, the different background slices move at progressively slower speeds with the foreground
almost rushing past, and the background moving along leisurely.
What just happened?
In the script we first cache the selectors we'll be using so that we don't have to create a new
jQuery object and select the elements from the DOM each time the background-position
changes, which will be very frequently indeed. We then set a keydown event listener on the
document object. Within the anonymous function we use as the event handler, we check
whether the key code supplied by the which property of the event object (this is normalized
by jQuery so it will be accessible cross-browser) is equal to 39, which is the key code returned
by the right arrow key.
We then call the animate() method, which is extended by the cssHooks bgpos.js file
to allow us to specify backgroundPosition as the style property to animate. We supply
relative values of +=1px, +=10px, and +=20px to move each layer at progressively faster
speeds which gives us the parallax effect. These animations are called simultaneously
and also have very short durations and linear easing. This is the last thing our keydown
handler needs to do.
Pop quiz – implementing the parallax effect
1. Why is it necessary to use linear easing in the previous example?
a. To prevent a flickering effect
b. It's not necessary, we just used it for fun
c. To prevent the animation using the default easing type of swing, which
causes a slowing down at the start and end as this would stop the animation
from running smoothly
d. To slow the animation down slightly