出错时摇一个登录表单 [英] Shake a login form on error

问题描述

我已经使用ajax成功构建了一个登录表单，并希望在用户输入错误的详细信息时为表单添加一个摇动效果。我有适当的功能，但只需要构建jquery效果（注意我知道jquery UI但不想使用它！我不想使用任何插件）

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)

到目前为止，我有：

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?

谢谢

推荐答案

为什么要这么麻烦？
动画排队。
更多 - 而不是左属性你可以使用 margin-left 什么阻止添加 position attribute：）

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);  
   }
}

这篇关于出错时摇一个登录表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！