Shake a login form on error

Question

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 f

Answer 1

jquery animations are queued by default, so you just need to call animate for each element of the array:

function shakeForm() {
    var p = [15, 30, 15, 0, -15, -30, -15, 0];
    var x = $('form').offset().left;
    var speed = 40;
    $.each(p, function() {
        $('form').animate({'left': x + this}, speed);
    });
}

Example: http://jsfiddle.net/3qdFL/

Answer 2

The examples above change the original position of the element.

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

demo here http://jsfiddle.net/UW6tN/1/

Answer 3

why not use css3 animations? less over head in my opinion. There so many plugins that exist because so many reinvent the wheel... I searched for the same thing and got 20 results of forums, and jquery plugins(yet another script to add)..but I found this and it works of coarse.

not my answer but it pure css3!

CSS animation similar to Mac OS X 10.8 invalid password "shake"?