jQuery 1.4 Animation Techniques - Index of

[ 113 ]
Chapter 5
The styles we used to create the theme are purely arbitrary and simply for the purpose of
the example. They can be changed to whatever we need in any given implementation to suit
other elements on the page, or the overall theme of the site.
Pop quiz – creating an animated content-viewer
1. What arguments may the animate() method be passed?
a. An array where the array items are the element to animate, the duration, the
easing, and a callback function
b. The first argument is an object containing the style properties to animate,
optionally followed by the duration, an easing type, and a callback function
c. An object where each property refers to the style properties to animate, the
duration, easing, and a callback function
d. A function which must return the style properties to animate, the duration,
easing, and a callback function
2. What does the animate() method return?
a. An array containing the style properties that were animated
b. A array containing the elements that were animated
c. A jQuery object for chaining purposes
d. A Boolean indicating whether the animation completed successfully
Have a go hero – making the image viewer more scalable
In our animated content viewer, we had a fixed number of images and a hardcoded
navigation structure to access them. Extend the content viewer so that it will work with an
indeterminate number of images. To do this, you will need to complete the following tasks:
Determine the number of images in the content viewer at run time and set the
width of the #slide wrapper element based on the number of images
Build the navigation links dynamically based on the number of images
Create the details object dynamically based on the number of images and set the
correct left properties to show each image