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

这个问题似乎是重新分配类不触发动画的播放事件，则需要重新创建的对象。