jQuery click 事件的 Animate.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('shake') 但它似乎永远不会触发。

我想出的另一种方法是设置 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'));

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

---

编辑

好的，我认为它现在已修复。 Try this.

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

'one' 只会触发一次，所以我将其更改为 'on'。