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 docs state:

При условии, что полная функция обратного вызова запускается после завершения анимации. Это может быть полезно для последовательного объединения различных анимаций.

Я угадываю причину, по которой он не движется в настоящее время, заключается в том, что он одновременно пытается анимировать в противоположных направлениях. Это непроверенное, но попробовать:

$('#' + 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() похоже на то, что в конце концов.