jQuery使用addClass和removeClass实现CSS动画

Question

现在，我已经编写了jQuery Ajax代码来检查用户名和密码是否正确。但是，我想不仅仅显示错误消息，还要把元素抖动起来。

定义抖动是什么？

那种像WordPress一样的抖动。进入wordpress.com/wp-login.php并填写一些随机信息，元素就会抖动。

可以通过Animate.css实现这种抖动效果。

问题出在哪里？

当登录失败时，jQuery会执行以下操作。

$('.element').addClass('shake');

但是，由于抖动元素具有仅运行一次的CSS动画，因此在抖动元素后我们将不需要CSS shake类。

所以我尝试过：

$('.element').addClass('shake').removeClass('shake');

但那太快了。

所以我又尝试了一遍：

$('.element').addClass('shake').delay(1000).removeClass('shake');

仍然无法播放动画，然后从.element中删除.shake类。如果用户多次输入错误的详细信息，则抖动将无效。

您可以在此处玩弄这个小例子。

目标是通过单击抖动按钮来多次抖动元素。

- Miro Rauhala

Answer 1

你可以使用以下代码在动画完成后删除类。 更新的示例

$(function () {
    $('button').click(function () {
        el = $('.element');
        el.addClass('shake');
        el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            el.removeClass('shake');
        });
    });
});

- Josh Crozier

---

真的可以工作！但是我不知道它是如何工作的，因为我不太了解JS。 - Miro Rauhala

我想我需要更深入地了解 .one()。 - Miro Rauhala

天啊，我一直在各个地方寻找这个解决方案！！一直试着添加和删除动画属性的一些技巧，但都没有成功。现在有了这个方法，就像魔法一样顺利了！！点赞！谢谢。 - Chun

@Cʜᴜɴ - 太棒了，知道这些答案能帮助这么多人让我感到高兴。 - Josh Crozier

Answer 2

只需移除 shake 类，添加一个小的延迟，然后再添加 shake 类。这样就可以使其每次都会晃动：

$(function(){
$('button').click(function() {
    $('.element').removeClass('shake');
    setTimeout(function(){
          $('.element').addClass('shake');
    }, 50);
});

});

- fjc

---

这个可以运行，但因某些原因会产生奇怪的闪烁：http://jsfiddle.net/VYuec/（Chrome） - Josh Crozier

我无法在这里重现闪烁问题，但我建议：先让它抖动，然后进行超时处理，在超时后删除类。这样应该可以避免闪烁。 - fjc

Answer 3

addClass() 和 removeClass() 不会遵循 delay()，因此它们会忽略延迟并执行它们被告知的操作，就好像 delay() 不存在一样。

然而，fadeIn() 会遵循延迟。

因此，如果您这样做，它应该可以正确地工作。这将调用匿名函数，在延迟和淡入完成后删除类名为 shake 的元素。

$('.element').addClass('shake').delay(1000).fadeIn(0, function() { $(this).removeClass('shake'); });

- CRABOLO

---

不需要让该元素淡出。 - Miro Rauhala

看起来@Stilly.stack使用了.fadeOut，以便.delay能够工作，否则.delay不会运行（只对动画运行，而不是添加/删除类）。 - Sam Thornton

我的意思是，现在当你点击Shake按钮（http://jsfiddle.net/A8K3w/3/），它会在动画完成后消失。 - Miro Rauhala