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