使用jquery添加/刪除類到每個點擊使用jquery

-1

我需要添加一個類到'div'點擊，爲CSS3動畫。但我也需要在動畫結束後刪除該類。使用jquery添加/刪除類到每個點擊使用jquery

我想是這樣的，但它不工作 -

$('.class').click(function() { 
    $('.class').removeClass("animate"); 
    $(this).addClass("animate"); 
});

請幫忙，謝謝。

來源

2013-10-21 Addicted

可以使用的setTimeout後[回調的一段時間 – Shadow

可能重複刪除它當CSS3轉換完成]（http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes） – billyonecan

可能的重複http://stackoverflow.com/questions/13884563/jquery-remove-class-after -css-animation-played –

你有兩個直接possibilites：

1）使用setTimeout功能的動畫火災後完成。要做到這一點，你應該知道動畫的持續時間有多長：

$('.class').click(function() { 
    var animDuration = 1000; //ms of the animation duration 
    $(this).addClass("animate"); 
    setTimeout(function(){ 
     $(this).removeClass("animate"); 
    }, animDuration); 
});

2）一個更好的解決辦法是在animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd添加事件監聽時觸發的動畫實際完成。對於這種方法，你不需要知道動畫的持續時間。

編輯：從adeneo，也從here採取了一些代碼：

$('.class').click(function() { 
    var animDuration = 1000; //ms of the animation duration 
    $(this).addClass("animate"); 
    $(this).bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() { 
     $(this).removeClass('animate'); 
    }); 
});

上面的代碼並幾乎你說什麼，「動態獲取時間」。它的真正目的是監聽動畫完成/結束時觸發的事件。多事件監聽器的原因是因爲瀏覽器的兼容性，每個瀏覽器都會觸發它自己的事件。（oAnimationEnd =歌劇，MSAnimationEnd = IE等）

感謝：https://coderwall.com/p/hn7gsg

來源

2013-10-21 10:43:39 subZero

非常感謝！我會測試它。有什麼辦法動態獲取動畫持續時間？我想我將不得不使用html5'data-'屬性，對吧？但它可以使用多個按鈕嗎？你能提供代碼嗎？ – Addicted

編輯效果很棒！非常感謝你！ – Addicted

@subzero請不要複製/克隆答案.. –

可以使用動畫功能動畫

$('.class').click(function() { 
     $(this).addClass("animate"); 
     $('.class').animate($('.class').removeClass("animate"),2000); 
    });

來源

2013-10-21 10:50:05

使用jquery添加/刪除類到每個點擊使用jquery

回答

相關問題