jQuery動畫不會晃動元素

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

使用左，上，右，下的屬性來改變元件的位置，它也必須有一個定位上下文：

.element { position: relative; } 

或

.element { position: absolute; } 

或

.element { position: fixed; } 

根據您的需求。

Answer 3

嘗試中，你可以傳遞到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()似乎是相同的，因爲這畢竟。