javascript 出错时摇一摇登录表单

Shake a login form on error

提问by Cameron

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)

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

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

谢谢

回答by abuduba

Why bother? Animations are queued. More - instead a leftattribute you can use margin-leftwhat prevents to adding positionattribute :)

何必呢？动画正在排队。更多 - 而不是一个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);  
   }
}

回答by Volvox

Its better to use CSS to this instead of JS. CSS uses less resources(is faster) and its simpler. You can find good (and 'ready to use') examples here: https://daneden.me/animate/

最好使用 CSS 而不是 JS。CSS 使用更少的资源（更快）并且更简单。您可以在这里找到好的（和“准备使用”的）示例：https: //daneden.me/animate/

回答by Cameron

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

我为此做了一个插件..检查它http://static.mbiosinformatica.com.br/jQuery/

Is it working in IE ( 7 , 8 , 9 ) , Chrome and Firefox.

它适用于 IE ( 7 , 8 , 9 )、Chrome 和 Firefox。

And, you can apply a callback function, to show 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 the positions, you can send array too, just: positions: [ [ 'L', 50 ... ] ]This value '50' its the shake distance from original position ..

在位置中，您也可以发送数组，只需：positions: [ [ 'L', 50 ... ] ]此值“ 50”是与原始位置的抖动距离..

---

---

To change timeout ( delay ) and effect duration, you have to set timeout: [you timeout .. / delay ]and the effect times .. interval: ...

要更改超时（延迟）和效果持续时间，您必须设置timeout: [you timeout .. / delay ]效果时间..interval: ...

回答by Mr. BeatMasta

mmm why use native js if jquery animate() is available... you try recurring like this:

嗯，如果 jquery animate() 可用，为什么要使用本机 js……你尝试重复这样：

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

回答by rikkitikkitumbo

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:

然后在你的 css 中：

.shakeClass{
   transition: margin 100ms;
}

回答by georg

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

jquery 动画默认排队，所以你只需要调用animate数组的每个元素：

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/

示例：http: //jsfiddle.net/3qdFL/

回答by andlrc

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

循环抛出数组使用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);
    });
}

A simple way to make an array is splitting a string with every space:

制作数组的一种简单方法是将字符串与每个空格分开：

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

The delay between each step:

每一步之间的延迟：

var delay = 100;

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

使用 setTimeout(function() {...}, theTimeBeforeFiring )

theTimeBeforeFiring = delay * key

key is the key the value has in the array:

key 是值在数组中的键：

key = 0, 1, 2, 3

回答by greaterKing

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.

为什么不使用 css3 动画？在我看来，更少的开销。有这么多插件存在，因为有这么多重新发明轮子……我搜索了同样的东西，得到了 20 个论坛结果，还有 jquery 插件（还有另一个要添加的脚本）……但我发现了这个，它的工作原理很粗糙。

not my answer but it pure css3!

不是我的答案，而是纯 css3！

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

类似于 Mac OS X 10.8 无效密码“摇一摇”的 CSS 动画？

回答by user3176757

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/

演示在这里http://jsfiddle.net/UW6tN/1/