javascript - 带有 addClass 和 removeClass 的 jQuery 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。如果用户多次输入错误的详细信息，则摇一摇将不起作用。

你可以玩 fiddle here .

目标是能够通过单击摇动按钮多次摇动元素。

Answer 1

您可以使用以下方法在动画完成时删除该类。

Updated Example

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