CSS 具有 jQuery 的动画在第二次单击按钮时未触发

Question

我有一个简单的 table 行，要通过按钮上的 jQuery onClick() 突出显示。

单击按钮时，我删除动画 class（以防它已经存在），然后再添加回来：

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

首次加载页面时，第一次按下按钮会按预期工作。然而，第二次按下不会重新启动动画。

这里是 fiddle.

可能是一个简单的 ;-)。谢谢。

菲奥娜

Answer 1

执行此代码....检查 tr 是否具有 backgroundAnimated 的 class。如果该元素确实存在，则删除 class。否则添加 class.

Demo

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

Answer 2

解决方法： 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
});

问题似乎是重新分配class不会触发动画的播放事件，您需要重新创建对象。

Answer 3

除了其他解决方案外，此方法还强制在每个click 事件上用更少的代码再次添加class。

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

JsFiddle Example

CSS 具有 jQuery 的动画在第二次单击按钮时未触发

CSS Animation With jQuery Not Firing on Second Button Click

css

jquery

css-animations