Javascript 出现错误时摇动登录表单

我已经成功地使用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);

}

据我所知，我需要循环值数组，但我该怎么做呢？注意，元素表单已经有了相对位置。所以这只是一个在随机序列中将这些值作为左值运行的例子

---

谢谢

使用

jQuery循环抛出数组。每个

：

制作数组的一种简单方法是使用每个空格拆分字符串：

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

每个步骤之间的延迟：

var delay = 100;

使用

setTimeout（函数（）{…}，点火前的时间）

key是值在数组中的键：

key = 0, 1, 2, 3

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

---

我已经为此制作了一个插件。。检查一下

它在IE（7、8、9）、Chrome和Firefox中工作吗

并且，您可以应用回调函数来显示错误消息。。或者别的什么

$('#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 */ });

在位置中，您也可以发送数组，只需：

positions:[['L'，50…]

该值“50”表示与原始位置的抖动距离

---

---

要更改超时（延迟）和效果持续时间，必须设置

超时：[you timeout../delay]

和效果时间<代码>间隔：…mmm如果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);
    });
}

---

默认情况下，jquery动画是排队的，因此您只需为数组的每个元素调用

animate

：

key = 0, 1, 2, 3

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

示例：

为什么要麻烦？ 动画已排队。 更多-您可以使用

left

属性

marginleft

阻止添加

position

属性的内容：）

函数shakeForm（）{
var l=20；
对于（var i=0；i，上述示例改变了元素的原始位置

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

函数shakeForm（）{
var保证金=15；
无功转速=50；
var时间=5；
对于（var i=0；i

这里的演示
使用CSS来代替JS更好。CSS使用更少的资源（更快），更简单。
你可以在这里找到很好的例子：
为什么不使用css3动画？在我看来，没有那么夸张。有那么多插件存在，因为有那么多人重新发明了轮子……我搜索了同样的东西，得到了20个论坛结果，还有jquery插件（还有另一个要添加的脚本）……但我发现了这一点，它的效果很粗糙

不是我的答案，而是纯css3

对于你们这些固执（像我一样）讨厌图书馆的人

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

然后在css中：

.shakeClass{
   transition: margin 100ms;
}

呵呵，这是个不错的解决方案，但为什么要使用字符串而不是数组呢？我不知道。只是写得更快而已。：）这是一个非常好的插件！但我建议在本例中也可以自定义效果的持续时间。谢谢..我正在改进它..如果你有想法，请与我联系！
andreykvital@gmail.com
。@Armin，edited.。您只需将其配置为
超时：500，间隔：1.
；）@AndreyKnupp阅读OP:
我不知道想使用任何插件来实现这一点
是的……但他可以了解插件的想法并做类似的事情。未来读者：如果你在OP中错过了它，请注意元素的位置必须是相对的，因此可能需要将链修改为：
$（“form”）.css（'position'，'relative'）。动画（{'margin left'：“+=”+（l=-l）+'px'}，50）；
在这种情况下，位置根本不重要-边距它总是相对于元素本身。顺便说一句，设置位置（或任何其他类似的常量参数）是没有效率的，也没有意义的在loop.QUESTION中，如何正确地实现这段漂亮的代码，如果我使用onclick属性调用函数，则无论登录信息是否正确，表单都会抖动。您需要首先创建一些验证逻辑，并在验证失败时运行动画。类似于
if（！validate（））{shakeForm（）；}
。基本上
shakeForm
可以被称为
shakeInput
或者只是
shakeElement
，然后传递一个元素
shakeElement（this）
的引用，如果我们谈论的是onClick处理程序。这太棒了。为什么要使用像JQ这样的垃圾来破坏思维方式。即使没有CSS.Tnx，效果也很好！
.shakeClass{
   transition: margin 100ms;
}