When we enter an incorrect password to the wordpress login panel, we observe that the login form shakes. Today we will try and make such an effect using our very own jQuery.

First of all we need a basic form(Any HTML element will do but lets try the form thing). Here is the HTML code:

<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>

<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>

</form>

</div>

Pretty standard HTML tags, right. Well, yeah! Its always just basic. Anyway, the CSS for this is as follows:

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;
}

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;

}

After applying the above CSS, you should see something like this:

DEMO

So far, its just a a form with decent(maybe :P) styling. So, lets add some magic by our very own jQuery: Just include jQuery in your code and enter the following in the script tags:

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);
		}
	});
});

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);

}

});

Let me tell you what we did. Whe the user submits the form we prevented the default behaviour using e.preventDefault();. Next, we got the values of the username and password field and if the values were anything other than “admin” and “pass” respectively we started shaking :D. Of course in real applications you would do the checking securely. Here is a small demo:

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

Other ways to shake the elements

Sometimes you can’t change the margins of the elements, so, you have to try and experiment with some properties to simulate the same effect. For example, if the element is positioned, you can animate the left,right CSS properties to achieve this effect. You can make this even more beautiful by animating more properties like border, color etc.