CSS動畫與jQuery沒有在第二個按鈕上點擊點擊

Question

我有一個簡單的表格行，通過按鈕上的jQuery onClick()高亮顯示。

當單擊該按鈕時，我刪除了動畫類（如果它已經存在），然後將其添加回：

$("#animate").click(function() { 
    $('tr').removeClass('backgroundAnimated'); 
    $('tr').addClass('backgroundAnimated'); 
}); 

當第一次加載頁面時，按下第一個按鈕按預期工作。然而，第二次按壓不會重新開始動畫。

這裏是fiddle。

可能是一個簡單的;-)。謝謝。

菲奧娜

Answer 1

除了其他解決方案之外，此方法還會強制在每個click事件中使用較少的代碼再次添加class。

$("#animate").on("click", function() {  
     $("tr").removeClass('backgroundAnimated').fadeOut(0).fadeIn(0).addClass('backgroundAnimated'); 
}); 

JsFiddle Example

Answer 2

執行此代碼....檢查，看看是否有tr一類backgroundAnimated。如果元素確實會刪除該類。否則添加該類。

Demo

$("#animate").click(function() { 
    if(!$('tr').hasClass('backgroundAnimated')){ 
     $('tr').addClass('backgroundAnimated'); 
    }else{ 
     $('tr').removeClass('backgroundAnimated'); 
    } 
}); 

Answer 3

解決方案： https://jsfiddle.net/8u17gxcp/

$("#animate").click(function() { 
    var trTemp = $('tbody > tr').clone().removeClass('backgroundAnimated'); //backup the old element 
    $('tbody > tr').remove(); //remove the old element 
    $('tbody').append(trTemp); //restore the element 
    $('tbody > tr').addClass('backgroundAnimated'); //add class to fresh element 
}); 

這個問題似乎是重新分配類不觸發動畫的播放事件，則需要重新創建的對象。