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 <input> 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 <head> of the page):
    input { width:200px; } .default, input { border:2px solid ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial