问

使用addClass和removeClass的jQuery CSS动画

不需要忆jf 发布于 2023-01-17 02:56

jquery

所以,我现在已经制作了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.如果用户输入错误的详细信息,那么一次摇动将无效.

你可以在这里玩小提琴.

目标是通过单击"摇动"按钮可以多次摇动元素.

1 个回答

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

更新的示例

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

2023-01-17 10:00 回答

好咯午睡了_740

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签