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));
$('form').css('left',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?
Thanks
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);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With