Question

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

$('#'+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);

它会改变场地背景和边框颜色，但场地不会抖动。

有什么想法吗？

Answer 1

将字段的position property设置为relative：

input {
    position : relative;
}

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

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

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

Answer 2

使用left，top，right，bottom属性来更改元素的位置，它还必须具有定位上下文：

.element { position: relative; }

或

.element { position: absolute; }

或

.element { position: fixed; }

视您的需要而定。

Answer 3

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

如果提供，则动画完成后将触发完整的回调函数。这个＆gt;可以用于将不同的动画按顺序串联在一起。

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

$('#' + 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()似乎与此相同。

jQuery动画不动摇元素

3 个答案: