The open source CMS WordPress uses the shake effect when incorrect login details are entered in the sign-in form for its backend administration area. In this example we can see how easy it is to implement this behavior using the
shake effect.
Add the following markup to the template file as the basis of the login form:
<form> <h2>Login</h2> <label>Username:<input id="name" type="text"></label> <label>Password:<input id="pass" type="text"></label> <input type="submit" id="submit" value="Login"> </form>
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); } }); });Save this file as
shake.html. We also need a basic stylesheet for this example...