jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
Class transitions
As well as extending jQuery's animate() method in order to provide color animations,
jQuery UI also extends some of jQuery's element manipulation methods. The following
methods are extended to provide class transitions:
addClass()
removeClass()
toggleClass()
jQuery UI also exposes a new method for transitioning between two classes—the
switchClass() method, which accepts the current class and new class, as well
as duration, easing, and callback arguments.
Time for action – transitioning between classes
We can rework our previous example so that it uses some of the class transition methods.
1. Add the class name default to the element and then change the
JavaScript so that it appears as follows:
$("#search").click(function(e) {
e.preventDefault();
var input = $(this).prev();
if (input.val() == "") {
input.switchClass("default", "error", 1200);
} else if (input.val() && input.hasClass("error")) {
input.removeClass("error", 1200);
}
});
2. Save the new page as class-animation.html. We'll need to make some changes
to the stylesheet as well. Create a new stylesheet and add the following rules to it
(or change the styles in the of the page):
input { width:200px; }
.default, input { border:2px solid #27659f; }
.error { border:2px solid #a72b2e; background-color:#f78080; }
3. Save the new file as class-animation.css.
[ 176 ]