使用jQuery更改HTML，但保留CSS3动画

Question

我有一个按钮可以更改名为.content的类的HTML，该类具有以下动画：

.content{
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
}

通过单击按钮，我可以如下更改其HTML：

$('.button-about').click(function(){
    $('.content').html('<h1>Test</h1>');
});

这可以很好地工作，但是问题是动画没有被重新加载，HTML只是被更改了，这是所期望的。 HTML更改时，有什么方法可以保留动画吗？

谢谢！

编辑：jsFiddle： http : //jsfiddle.net/ar7wU/

Answer 1

如Roko所述，更改元素的HTML不会触发动画。

但是，您可以通过以下方式实现所需的结果：

1. 克隆当前元素
2. 用您的HTML替换克隆的HTML
3. 删除现有元素

 var el = $('.content'), newone = el.clone(true); newone.html('<h1>Test</h1>'); el.before(newone); $(".content:last").remove();