
1 2 3 4 5 6 7 |
<div id="form" > <form action="" method="POST" id="my_form" > <label for="username" >Username:</label><input type="text" name="username" id="username" /><br> <label for="password" >Password:</label><input type="password" name="password" id="password" /><br> <input type="submit" value="Login" id="submit" /> </form> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
body{ font-family:arial; } #form{ background:white; border:1px solid #e5e5e5; padding:10px; border-radius:5px; box-shadow:rgba(200,200,200,.7) 0 4px 10px -1px; width:300px; margin:0px auto; } #form label{ display:inline-block; cursor:pointer; color:#777; min-width:85px; } #form input[type="text"],#form input[type="password"]{ color: #555; margin:10px 0px; padding: 5px; border: 1px solid #e5e5e5; background: #fbfbfb; box-shadow: inset 1px 1px 2px rgba(200,200,200,.2); width:160px; } #form input[type="submit"]{ background:#278ab7; color:white; cursor:pointer; border-radius:3px; border:none; padding:5px 10px; } |
DEMO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
jQuery(document).ready(function($){ $("#my_form").on("submit",function(e){ e.preventDefault(); var u=$("#username").val(); var p=$("#password").val(); if(u!="admin" && p!="pass"){ $("#form").animate({ 'margin-left':'-=50px' },100).animate({ 'margin-left':'+=100px' },100).animate({ 'margin-left':'-=100px' },100).animate({ 'margin-left':'+=100px' },100).animate({ 'margin-left':'-=50px' },100); } }); }); |
DEMO
How the shake works
Its pretty simple actually, we just move the form div left then right and repeat this again very fast. Then, at last we move the div where it was initially. This whole process simulates shaking of the element. Here is the script for download:Download
Follow Us