jQuery 1.4 Animation Techniques - Index of

Other Popular Animations
Next we add a class name to the outer proximity container. Remember, this class name is
used to differentiate between scripting being disabled and enabled so that we can add the
required styling. We also wrap the contents of the proximity container (the 20 images) in
our newly created scroller element, and append the message to the proximity container.
Next we set a variable which is equal to the width of the proximity container divided by
two, which gives us the horizontal middle of the element, which we'll need to use in some
calculations to position the scroller element, and work out where the mouse pointer is
relative to the proximity container.
We could just as easily have set the number that the middle variable needs to contain,
instead of calculating it in this way. The width of the proximity container (with scripting
enabled) is set in our CSS file and is highly arbitrary to this particular example. If we changed
its width however, the script would break if we set the figure directly in the variable instead
of working it out programmatically. It is always best to avoid hardcoding 'magic' numbers
into scripts whenever possible.
At this point we also need to cache a reference to the scroller element now that it has
been appended to the page. We can't use the contents of the scroller variable that we
created at the start of the script, so we overwrite it with a fresh reference to the element by
selecting it from the page again.
We now need to set the width of the scroller element so that it is wide enough to
accommodate all of the images in a single row. To do this we pass a function to jQuery's
width() method which returns the width to set.
The function calculates this figure by iterating over each image and adding both its width
and horizontal margin to the total variable. This means that an indeterminate number of
images can be used without changing the script, and that images with different widths and
spacing can be used.
Once we've set the width of the scroller element, we then need to position it so that the
center of the scroller is at the center of the proximity container. This is so that when the page
loads, the visitor can move it to the left or right depending on where they move their pointer
or which arrow key is pressed.
If we load the page in a browser at this point, we should find that the appearance of the
elements on the page has changed:
[ 212 ]