jQuery 1.4 Animation Techniques - Index of

Full Page Animations
Pop quiz – creating a single-page website
1. We interact with the this object directly in this example instead of the jQuery
equivalent $(this), why?
a. Because it uses fewer characters
b. Its faster and more efficient because an entirely new jQuery object is not
created
c. Because it looks better
d. Because it contains more information
2. We create and use a custom event in this example, why?
a. Because custom events execute faster than standard browser events
b. Because the each() method does not allow us to update the scrollTop
property of the window
c. Because it is more efficient for the code executed by the handler to be called
once than on every iteration of the each() method
d. Because the scrollTo plugin can only be used in conjunction with
custom events
Have a go hero – extending single-page navigation
There are several things you could do to expand on this example. One thing you could do
is add functionality that checks which page is requested by looking at the href property
of the document. If a page other than the first page is requested, you could scroll to the
corresponding page section so that the page they link to is actually shown instead of
resetting to the first page.
Another thing you could do would be to extend the example so that the pages don't have
to be numbered page-2.html, and so on, and instead could have any file name. In the
first section of code, we read the href of the link if one of the footer links is clicked instead
of looking for a document fragment identifier. This same technique could be applied to the
header links as well, so that any page that is linked to can be included in the single page.
Or, to really appreciate the visual effect of our site-on-a-page, you could add some additional
content and a theme to the site. Each page need not have the same skin, and scrolling
between different colors and imagery can really bring the page to life.
[ 200 ]