0

进行表单验证。如果字段验证失败，我希望更改颜色并摇动该字段。我的代码：

$('#'+vet)
.css({'background-color':'yellow','border-color':'red'})
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
.animate({ left: "0px" }, 100);

它确实改变了字段背景和边框颜色，但字段不会晃动。

有什么想法吗？

4

3 回答 3

1

将字段的position属性设置为relative：

input {
    position : relative;
}

（使用任何对您的结构最有意义的选择器。）

演示：http: //jsfiddle.net/Xt7JW/

默认情况下，元素具有static设置left（和top等）无效的定位。

于 2013-07-07T21:39:56.630 回答
1

Using the left, top, right, bottom properties to change the position of an element, it also has to have a positioning context:

.element { position: relative; }

or

.element { position: absolute; }

or

.element { position: fixed; }

Depending on your needs.

于 2013-07-07T21:42:43.103 回答
1

尝试在可以传递给animate()方法的回调方法中链接动画，而不是直接将动画链接在一起。jQuery 文档状态：

如果提供，则在动画完成后触发完整的回调函数。这对于将不同的动画按顺序串起来很有用。

我猜它目前没有移动的原因是它试图同时在相反的方向上设置动画。这是未经测试的，但请尝试：

$('#' + vet).css({'background-color':'yellow', 'border-color':'red' })
.animate({ left: '-=10px'}, 100, function() {
   $('#' + vet).animate({left: '+=20px'}, 100, function() {
     $('#' + vet).animate({left: '-=20px'}, 100, function() {
        $('#' + vet).animate({left: '+=10px'}, 100);
     });
   });
});

使用+=也消除了将位置设置为相对。现在每个动画都在最后一个完成时执行。

编辑：.animate().animate()毕竟似乎与此相同。

于 2013-07-07T21:52:20.280 回答