Cameron Cameron - 1 year ago 110
Javascript Question

Shake a login form on error

I have successfully built a login form using ajax and want to add a shake effect to the form when the user enters incorrect details. I have the function in place that will fire but just need to build the jquery effect (note I know of jquery UI but don't want to use it! I don't want to use ANY plugins for this)

So far I have:

function shakeForm() {

var p = new Array(15, 30, 15, 0, -15, -30, -15, 0);
p = p.concat(p.concat(p));



From what I understand I need to loop the array of values but how do I do that? Note that the element form has a position of relative already. So it's just a case of running those values as the left value in a random sequence?


Answer Source

Why bother? Animations are queued. More - instead a left attribute you can use margin-left what prevents to adding position attribute :)

function shakeForm() {
   var l = 20;  
   for( var i = 0; i < 10; i++ )   
     $( "form" ).animate( { 
         'margin-left': "+=" + ( l = -l ) + 'px',
         'margin-right': "-=" + l + 'px'
      }, 50);  

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download