使用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();