出错时摇一个登录表单

Question

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

到目前为止,我有:

function shakeForm() {

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


    $('form').css('left',p);

}

根据我的理解,我需要循环值数组,但我该怎么做？请注意,元素表单已经具有相对位置.那么这只是将这些值作为随机序列中的左值运行的情况？

谢谢

Answer 1

何必？动画排队.更多 - left您可以使用margin-left什么阻止添加position属性的属性:)

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

最好使用CSS来代替JS.CSS使用更少的资源(更快)并且更简单.您可以在此处找到好的(以及"随时可用")示例:https://daneden.me/animate/