Time for action – shaking an element

The open source .Net CMS Umbraco uses the shake effect when incorrect login details are entered in the sign-in form for its back-office administration area. In this example we can see how easy it is to implement this behavior using the shake effect.

  1. Add the following markup to the template file as the basis of the log in form:
    <form>
      <h2>Login</h2>
      <label>Username:<input id="name" type="text"></label>
      <label>Password:<input id="pass" type="text"></label>
      <button id="submit">Login</button>
    </form>
  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 ...

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.