jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
5. When the is clicked, an outline is transferred from the Firefox icon to the
App folder icon to direct the visitor:
The transfer element is resized as it moves from the starting element across to the target
element. The animation is approximately 50 % complete in the previous screenshot.
What just happened?
In the underlying HTML we have a container which is given the background image
of the application install dialog box. Within this we have a which is given the Firefox
icon background, and a second which is given the App folder icon. Both inner
elements are given id attributes for styling purposes and for easy selection with jQuery.
In the script we add a click-handler to the which applies the effect every time
the is clicked. The handler function calls the transfer effect on the #firefox
element, which sets the icon as the starting element.
[ 154 ]