jQuery 1.4 Animation Techniques - Index of

Extended Animations with jQuery UI
2. Now add the following code to the empty closure at the bottom of the template file:
$("#submit").click(function(e) {
e.preventDefault();
$("input").each(function(i, val) {
if (!$(this).val()) {
$(this).css("border", "1px solid red").effect("shake", {
distance: 5 }, 100);
}
});
});
3. Save this file as shake.html. We also need a basic stylesheet for this example. Add
the following CSS to a new file:
form {
width:145px; padding:20px; margin:auto; border:1px solid #000;
font:normal 13px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif;
}
h2 { font-size:14px; margin-top:0; }
input { display:block; margin-bottom:10px; border:1px solid #000;
}
4. Save this file as shake.css.
5. If we run the page in a browser and click the without completing either
of the fields, both fields will have their borders set to red and will shake
from side to side:
[ 148 ]