jQuery 1.4 Animation Techniques - Index of

Full Page Animations
The second section of code is encompassed within an anonymous function passed to jQuery's
each() method which we use to process each of the links in the header. The function we
define is automatically passed an index (i) as an argument representing the current iteration
which we use to build an ID string ready for populating the positions object.
This object will contain a set of nested objects where each nested object represents one
of the external pages and has a left and a top property which correspond to where on the
single page the content is positioned.
Working out where to place the content section on the vertical axis is easy; we just use the
JavaScript modulus operator (%) to see if there is a remainder left after dividing the index by
two, in conjunction with a ternary conditional.
If the index can be divided by two without a remainder, we position the content from the
external page one window's height from the top of the page. If there is a remainder, we
just position it at the top of the page. This means that the content sections will be laid out in
a zig-zag pattern along two rows, where each row is equal to the height of the window.
Working out where to place each content section along the page horizontally is a little more
challenging, but it's only the very last section that proves to be tricky. We use the ternary
here as well, this time checking whether we are processing the last link or not.
If we aren't, we simply position the content by multiplying the width of the window by the
index, moving each successive section along the page by one window's width.
If we are processing the last link however, we need to position the content by multiplying
the width by the window width, but then subtracting one window's width dived by two,
minus the width of the content's container dived by two. This ensures that the content
section is aligned with the header and footer correctly.
Once the location for the page that the current link points to has been added to the
position's object, we then create the new container for the page content and give it a class
name for styling purposes.
We also use the load() method to load the external pages asynchronously. This method
accepts the URL of the page to load, which we can get from the href property of the current
link and a selector that matches all child elements within the content element in the page
that is loaded. When a selector is passed to the load() method, only that portion of the
external page will be retrieved.
Once the container has been created, we position it using the css() method, setting
its left and top properties to the corresponding properties in our positions object for
convenience. Finally we append the new to the page's (which still only exists
in memory at this point).
[ 198 ]