jQuery 1.4 Animation Techniques - Index of

[ 175 ]
Chapter 6
2. To invoke the color changes when the is clicked, we can use the following
JavaScript in the empty function near the bottom of the document:
$("#search").click(function (e) {
e.preventDefault();
var input = $(this).prev();
if (input.val() == "") {
input.animate({
backgroundColor: "#f78080",
borderTopColor: "#a72b2e",
borderRightColor: "#a72b2e",
borderBottomColor: "#a72b2e",
borderLeftColor: "#a72b2e"
}, 1200);
};
});
3. Save this page as color-animations.html. We literally only need a couple
of styles for this example. We could probably get away with defining them in a
block in the of the page. We just use the following CSS:
input { width:200px; border:2px solid #27659f; }
4. When we run the page, we see that the text field changes color if the is
clicked while it is empty.
What just happened?
The CSS, while extremely small, is required in this example because the will lose
any attractive styling provided by modern browsers when the colors are animated. Setting
the CSS properties we are animating helps prevent this ugly switch.
In the script we simply cache a selector that points to the , and then test whether
the field is empty. If it is we call the animate() method, specifying the aspects of the target
element we'd like to animate. Notice that we must specify each border-color independently
for the animation to work correctly.