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

Question

I have a button that changes the HTML of a class called .content which has the following animation:

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

With the click of a button I change its HTML like so:

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

This works fine, but the problem is that the animation isn't reloaded, the HTML is simply changed, which is what is expected. Is there any way to preserve the animation when the HTML changes?

Thanks!

EDIT: jsFiddle: http://jsfiddle.net/ar7wU/

Answer 1

As Roko mentioned, changing HTML of an element will not trigger animations.

However, you can achieve your desired outcome by:

1. Cloning your current element
2. Replacing the HTML of the clone with your HTML
3. Removing the existing element

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