We can rework our previous example so that it uses some of the class transition methods.
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); } });
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>
element of the page):input { width:200px; } input, .default { border:2px solid #27659f; } .error { border:2px solid #a72b2e; background-color:#f78080; }
Save the new file as
class-animation.css
.Run the page in a browser and again, click the
<button>
element without entering...