Paste the login form on error

Question

I have successfully created the login form using ajax and want to add a jitter effect to the form when the user enters incorrect data. I have a function that will fire, but I just need to create a jquery effect (note that I know jQuery UI, but I don’t want to use it! I don’t want to use ANY plugins for this)

So far, I:

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 encode an array of values, but how to do it? Note that the shape of the element already has a relative position. So is this just the case when these values ​​are considered a left value in a random sequence?

thanks

Answer 1

Why bother? The animation is queued. More details - instead of the left attribute, you can use margin-left , which prevents the addition of the 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); } } 

Answer 2

It is better to use CSS for this instead of JS. CSS uses fewer resources (faster) and easier. Here you can find good ones (and "ready to use"): https://daneden.me/animate/

Answer 3

I made a plugin for this .. check it out http://static.mbiosinformatica.com.br/jQuery/

Does it work in IE (7, 8, 9), Chrome and Firefox.

And you can apply the callback function, show the error message .. or anything else.

 $('#div').shake({ positions : { 'L' : 50 , 'R' : 50 } , // shake only left and right (U,L,R,D) rotate : false , // rotate div on shake .. true/false parent : false // shake parent div .. true/false }, function(){ /* do something */ }); 

In positions you can also send an array: positions: [ [ 'L', 50 ... ] ] This value of " 50 " corresponds to the distance from the original position.

---

To change the timeout (delay) and duration of the effect, you must set the timeout: [you timeout .. / delay ] and the response time. interval: ...

Answer 4

mmm why use inline js if jquery animate () is available ... you are trying to repeat like this:

 var p = new Array(15, 30, 15, 0, -15, -30, -15, 0); function shakeForm(index) { if(typeof index === "undefined") index = 0; if(typeof p[index] === "undefined") return false; $("form").animate({ "left": p[index] }, function() { shakeForm(index + 1); }); } 

Answer 5

For those of you who are stubborn (like me) and hate libraries ...

 var e = document.getElementById('dividname'); e.style.marginLeft='8px'; setTimeout(function(){e.style.marginLeft='0px';},100); setTimeout(function(){e.style.marginLeft='8px';},200); setTimeout(function(){e.style.marginLeft='0px';},300); 

then in your css:

 .shakeClass{ transition: margin 100ms; } 

Answer 6

the loop issues an array using jQuery.each : http://jsfiddle.net/N8F7Z/1/

 function shakeForm() { var p = "15 30 15 0 -15 -30 -15 0".split(" "); $.each(p, function(key, value) { var delay = 100; setTimeout(function() { $("form").css("left", value + "px"); }, delay*key); }); } 

An easy way to create an array is to split the string with each space:

 var p = "15 30 15 0 -15 -30 -15 0".split(" "); 

Delay between each step:

 var delay = 100; 

Using setTimeout(function() {...}, theTimeBeforeFiring )

 theTimeBeforeFiring = delay * key 

Key

is the key that matters in the array:

 key = 0, 1, 2, 3 

Answer 7

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 8

The above examples change the initial 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 9

Why not use css3 animations? in my opinion, less head. There are so many plugins that exist because many reinvent the wheel ... I searched the same and got 20 forum results, and jquery plugins (another script to add) .. but I found this and it works rough.

not my answer, but pure css3!

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