使用addClass和removeClass的jQuery CSS动画

Question

所以，我现在已经制作了jQuery Ajax代码，用于检查用户名和密码是否正确。 但是，我不想只显示错误信息，而是想要动摇元素。

定义摇动？

wordpress所具有的那种震动。 转到wordpress.com/wp-login.php并在那里填写一些随机信息，元素会震动。

这种震动可以通过Animate.css完成。

那有什么问题呢？

当登录失败时，jQuery会这样做。

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

但是因为shake元素只有一次运行的CSS动画，所以在它抖动元素后我们不需要CSS抖动类。

所以我尝试过：

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

但这种情况发生得太快了。

所以我又试了一次：

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

仍然没有播放动画，然后从.element删除.shake类。 如果用户输入错误的详细信息，那么一次摇动将无效。

你可以在这里玩小提琴。

目标是通过单击“摇动”按钮可以多次摇动元素。

Answer 1

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

更新的示例

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

Answer 2

只需删除摇动类，添加一小段时间然后添加摇动类。 这会让它每次都动摇：

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

}）;

Answer 3

addClass()和removeClass()不尊重delay() ，所以他们会忽略延迟，只是做他们被告知的delay()不存在

虽然fadeIn()确实如此。

所以，如果你这样做，它应该正常工作。 这称匿名函数在延迟和fadeIn完成后删除类抖动。

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