Remove html tags after animation is run with Javascript

I have the following HTML code:

<div>   
    <span>H</span>
    <span>e</span>
    <span>l</span>
    <span>l</span>
    <span>o</span>

    <span>W</span>
    <span>o</span>
    <span>r</span>
    <span>l</span>
    <span>d</span>
</div>

I want to remove all of the <span> and </span> tags from the contents of the <div>. However, the letters within the span are each appearing after a staggered .fadeIn() animation and I only want to remove the <span> tags after the animation is complete.

The final product should be <div>Hello World</div> after the animation has revealed each character.

JQuery 1.6+ solutions are welcome.

http://jsfiddle.net/dsPJu/

here is a working example

this should do the trick... you just need to use a callback function