ShakeIt – The jQuery effect!

Published 21 Nov by SuperNOVA

ShakeIt – The jQuery effect!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: Pretty standard HTML tags, right. Well, yeah! Its always just basic. Anyway, the CSS for this is as follows: 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: 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.