jQuery 1.4 Animation Techniques - Index of

Other Popular Animations
prox.width())
}, 6000, "linear");
}
}
}).keyup(function() {
scroller.stop();
});
What just happened?
We attach the keydown event handler to the document object so that the visitor doesn't
have to focus the proximity container somehow. Within the anonymous function, we first
check whether the left or right arrow keys were pressed.
The key code 37 refers to the left arrow key and the code 39 refers to the right arrow key.
The keyCode property, normalized by jQuery so that it is accessible to all browsers, will
contain the code for whichever key was pressed, but we only want to react to either of the
specified keys being pressed.
When either of these keys are pressed, we first fade out the message and then check that
the scroller is not already being animated using jQuery's is() method in conjunction with
the :animated filter.
As long as the scroller element is not already being animated (denoted by the ! at the start
of the condition), we then animate it. We check the keyCode once again with a ternary so
that we can move the scroller in the correct direction depending on which key is pressed.
Finally we add a keyup event handler that stops the scroller animation once the key is
released. This improves the interactivity of animation as it allows the visitor to intuitively
stop the scroller whenever they wish.
Have a go hero – extending proximity animations
The obvious way to extend our example would be to trigger animations on the vertical axis
as well. We could have a grid of images instead of a single row and animate the grid up and
down as well as left and right.
One thing to do to extend the example would be to add additional keyboard functionality.
Check for additional keys such as the home and end keys for example, which could navigate
to the start or end of the scroller element accordingly.
[ 216 ]