Trigering a CSS3 Transition with adding a class with Jquery

Question

At the moment I have a running fiddle that I am trying to get a css3 opacity transition to fire off when I add a class to it. The basic set up is that I click a button and then through jquery I add a div to the dom and after I add that element to the dom I then add a class to it. The adding class to that new dom element is suppose to kick off my transition but it is not, the only thing that is happening is that the element is being showed but the opacity transition isnt working. Any help will be much appreciated, I am leaving a link to the fiddle here fiddle link .And yes I know i could do the fade in with just jquery, but this is just a experiment , that would probably be used to kick off other css transition other then opacity

Answer 1

I have encountered this problem before, the only workaround I've found is adding a setTimeout to let the DOM notice there's a new element. It can be zero ms and it will still work:

$('button').live('click', function() {
    $(this).after("<div class='fade'>This is just a test</div>")
    setTimeout(function(){$(".fade").addClass("in");}, 0)
});

http://jsfiddle.net/tfmFx/