jQuery 1.4 Animation Techniques - Index of

Other Popular Animations
What just happened?
Within the goAnim() function, we first get the offset of the proximity container so that
we know its position relative to the document. We then work out where the mouse pointer
is relative to the middle of the proximity container. This means that numerically, the pointer
offset will be 0 when it is in the center.
If the mouse pointer is in the left half of the proximity container, the number in the
resetOffset variable will be negative. This would cause our calculations later in the
function to be incorrect, so we need to check whether the resetOffset variable is greater
than 0, and if it isn't we invert the number using its minus value.
Ultimately, what we want to happen is for the speed of the scroller to increase as the pointer
moves towards either end of the proximity container, and slow down as it moves into the
center. In other words, the speed of the animation needs to be inversely proportionate to
the distance of the pointer from the middle of the proximity container.
The problem that we have at this point is that the figure representing the distance of the
pointer from the middle of the proximity container gets larger as it moves towards the edge,
so the animation would slow down instead of speeding up if we were to use this figure as
the duration of the animation.
To invert the value stored in the normalizedDuration variable, we subtract it from the
value representing the middle of the proximity container, and then multiply the resulting
figure by 50. The duration argument is in milliseconds, so if we don't use a multiplier (50 was
arrived at by trial and error) to increase our value, the animations will occur too quickly.
We can now initiate the animation. We use the JavaScript ternary statement to test whether
the resetOffset figure is less than 0 and if it is, we know that to get the scroller to slide to
the right we just need to set the left style property of the scroller element to 0.
If the variable is greater than 0, we have to move the scroller element negatively (to the left)
in order to show the images hidden at the right. To align the right edge of the scroller
to the right edge of the proximity container, we set the end point of the animation to the
width of the scroller minus the width of the proximity container.
Time for action – adding the mouse events
Now we need to add the mouse events that will trigger the animations:
prox.mouseenter(function(e) {
message.text(pointerText).delay(1000).fadeOut("slow");
goAnim(e);
[ 214 ]