jQuery 1.4 Animation Techniques - Index of

[ 155 ]
Chapter 6
In the configuration object, we set the to option to a selector for the apps element, and
the className option to the string ui-effect-transfer. This string is applied to the
element as a class name and is used to add a green border to the transfer element while
it is visible.
Each time the is clicked, the transfer element will be shown and will animate
from the starting element (the Firefox icon) to the ending element (the Apps folder icon).
Pop quiz – using the effect API
1. How many new effects does jQuery UI give us?
a. 2
b. 18
c. 9
d. 14
2. How is the effect we wish to use specified?
a. By calling the effect as a function, for example bounce()
b. The name of the effect is passed in string format to the effect() method
as the first argument, for example effect("bounce")
c. The name of the effect is provided as the value of the effect key in an
object passed to the animate() method, for example animate({ effect:
"bounce" })
d. The name of the effect is passed as a string to an event helper, for example
click("bounce")
Using effects with show and hide logic
Some of the jQuery UI effects can also be used in conjunction with jQuery's show(),
hide(), and toggle() methods when showing or hiding logic is required. In fact,
some of the effects are better suited to this method of execution.
The blind effect
The blind effect is the perfect example of an effect that is usually best used with show/hide
logic as opposed to the standard effect API. Although the blind effect will work with the
standard effect API, what will happen is that the effect will run according to its default mode,
but then the element will be put back into its original state. This is true for all effects that
have a mode configuration option.