jQuery点击事件的动画.css问题

Question

我正在尝试对使用jQuery构建的表单应用字段验证。我还使用animate.css来应用不同的动画类。

假设我有一个电子邮件字段，用户单击提交并检查他们输入的电子邮件是否有效。如果不是，请将shake动画应用于输入字段。

到目前为止我拥有的代码：

$submit.click(function(event) {
event.preventDefault();
var email = $input.val();
// This does not seem to ever fire.
$input.removeClass('shake');
if (!method.validateEmail(email) || $.trim(email) == '') {
$input.addClass('shake');
return;
}
$form.submit();
});

这是用户第一次提交表单。但是，任何后续的单击都不会再现抖动动画。在它检查电子邮件是否有效之前，我尝试过应用removeClass("ake")，但它似乎永远不会启动。

我想出的另一种方法是将间隔设置为2000ms，以检查输入字段是否有一类抖动，如果有，则将其删除，但这是有缺陷的，因为用户可以在间隔结束前300ms提交表单，导致动画只持续剩余的时间。间隔的代码为：

setInterval(function() {
if ($input.hasClass('shake')) {
$input.removeClass('shake');
}
}, 2000);

小提琴可以在http://jsfiddle.net/9Zs9T/1/

你知道如何让表单在输入无效的情况下动摇每一个提交的表单吗？谢谢

Answer 1

您的代码

$submit.click(function(event) { //...

将单击事件发送到$submit选择。据推测，当用户点击时，您想要执行的是该功能

$submit.on("click", function(event) { //...

Answer 2

在动画结束时激发一个事件以移除类，而不是在单击事件中。

$input.one('webkitAnimationEnd mozAnimationEnd 
MSAnimationEnd oanimationend animationend', $(this).removeclass('shake'));

我还没有测试，但我认为它会起作用。

---

编辑

好吧，我想现在已经解决了。试试这个。

$("#form-email").on('animationend webkitAnimationEnd oAnimationEnd',
function(){$('#form-email').removeClass("shake");});

"one"只会触发一次，所以我把它改为"on"。