jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
Note that when we use the stop() method with the image, it is to prevent a build-up of
effects if the mouse pointer is repeatedly moved on and off one of the links. The second
function is really the reverse of the first function, which simply resizes the element back to
its original position and size.
The transfer effect
The transfer effect simply transfers the outline of one element to another element. Like
the size effect that we looked at a moment ago, the transfer effect will not work if it is
not configured.
Configuration options
The transfer effect has only two configuration options, although only one is mandatory.
These options are listed in the following table:
Option Default Usage
className none The value of this option, if set, is added to the transfer
element when the effect runs
to none A jQuery selector that specifies the target element that the
transfer element is sent to
Time for action – transferring the outline of one element
to another
In this example we'll recreate a popular application installation dialog from OSX, and use
the transfer effect to help show visitors where to drag the icon (the icon won't actually be
draggable, all we're doing is looking at the transfer effect).
1. Add the following elements to the of the template file to create the install
dialog:
To install the application, drag its icon over to the apps
folder icon.
Show me
[ 152 ]