使用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');

仍然没有播放动画，然后从.shake中移除课程.element。如果用户输入的错误信息超过一次，那么摇动就不会起作用。

你可以玩小提琴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');
        });
    });
});

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'); });