jQuery 1.4 Animation Techniques - Index of

[ 177 ]
Chapter 6
4. Run the page in a browser and again, click the without entering anything
into the text field. The should transition to the error class and appear
the same as it did in the last example. This time however enter some text in the
and click the again. The error should then transition back
to default.
What just happened?
This time if the has no value we just call the switchClass() method specifying
the current class of default, the new class of error, and a duration of 1.2 seconds. Note
that you must supply both the current and new classes for the example to work correctly.
In the next branch of the conditional, we check that the has both a value and a
class name of error. If it does we call the removeClass() method specifying just the
class to remove and a duration. The duration is required in order to trigger the transition.
In the CSS we provide the default styling using the class name default as well as generally
for all input elements. We need to do this because otherwise the element loses its styles
while the error class is in the process of being removed, causing it to revert to a standard
un-styled element.
Performance
When using jQuery, we are always advised that changing the class name of
an element is more efficient than manipulating an element's style attribute
directly, so it's natural to assume that using switchClass() would be more
efficient than using animate().
This however is not the case, as Firebug's profile tool will show. In the previous
example, if the second branch of the conditional is removed and the page
and both color-animation.html and class-animation.html are
profiled, it is color-animation.html that wins by a margin of around 20
milliseconds.
Pop quiz – easing, color, and class animations
1. How are easing functions specified?
a. In string format as the third argument to the effect() method, for example
effect("blind", {}, "easeOutBounce")
b. As Boolean in a callback function, for example effect("blind",
function() { easeOutBounce = true })
c. Easing cannot be used
d. In string format as the value of the easing configuration option, for example
effect("blind", { easing: "easeOutBounce" })