jQuery 1.4 Animation Techniques - Index of

prox.mousemove(function(ev) {
goAnim(ev);
});
});
prox.mouseleave(function() {
scroller.stop();
prox.unbind("mousemove");
});
[ 215 ]
Chapter 8
What just happened?
First we set a mouseeenter event handler so that we can detect when the pointer initially
enters the proximity container. When this occurs we change the message text so that it
shows what to do with the mouse pointer and then fade out the message slowly after a
delay of one second.
We then call our goAnim() function to start the animation. At this point, we set a
mousemove event so that we can increase or decrease the speed of the animation as the
pointer moves within the proximity container. Each time the pointer moves, we call the
goAnim() function once more. Each time this function is called we pass in the event object.
We also set a mouseleave event handler on the proximity container so that we can detect
when the pointer leaves this element altogether. When this occurs we stop the currently
running animation and unbind the mousemove event handler.
At this point we should have a fully working proximity slider. Earlier we discussed how the
proximity effect is only useful to mouse users, so let's add a keyboard event handler to our
script that will let keyboard users navigate the scroller as well.
Time for action – adding keyboard events
The following code enables keyboard driven animations:
$(document).keydown(function(e) {
if (e.keyCode === 37 || e.keyCode === 39) {
message.fadeOut("slow");
if (!scroller.is(":animated")) {
scroller.stop().animate({
left: (e.keyCode === 37) ? 0 : -(scroller.width() -