今ある要素をフェードアウトして、新しい要素をフェードインさせたい 【jQuery】

【問題】【jQuery,jQuerymobile,jQuerymobile.css】

<div id="sample"><p>DEFAULT</p></div>

<a data-role="button" id="fire" >FIRE</a>

<script>

（略）

$("#fire").click( function(){

    $("p").fadeOut(1000,function(){

        var dummy = document.createElement('p');

        dummy.innerHTML = "HOGEHOGE";

        $(dummy).hide().appendTo("#sample").fadeIn(1000);

    });

});

（略）

</script>

<!--

最初のクリックでDEFAULTはフェードアウトされるのに、

その後は、HOGEHOGEがフェードアウトの後また現れ、

倍倍に増えていってしまう。

-->

【原因】

fadeOut() は、要素を隠すだけで、消しはしない、ということだろうか？

【解決】

上記コードの

    $("p").fadeOut(1000,function(){

        var dummy = document.createElement('p');

の部分に初期化する一文を加えて以下のようにした。

    $("p").fadeOut(1000,function(){

        $("#sample").html("");

        var dummy = document.createElement('p');