javascript - テキストは、アニメーション化された隣接テキスト(jquery)に合わせて自動的に移動します:滑らかにする方法は?

Question

jqueryを使用して単語を循環しています。当然、単語のサイズは変化し、その隣にあるアニメーション化されていないテキストの位置がずれます。この位置の変化を滑らかにする方法はありますか?

私が持っているもの: http://jsfiddle.net/tWm36/121/

私が達成しようとしていること: https://gumroad.com/

テキストが突然移動するのではなく、循環する単語に合わせてスムーズに離れていく様子がわかりますか?

<div>
<span id="changerificwordspanid">awesome</span>
 <span>This is so</span>

(function(){
var words = [
    'awesome',
    'incredible',
    'cool',
    'fantastic'
    ], i = 0;
setInterval(function(){
    $('#changerificwordspanid').fadeOut(function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn();
    });
}, 2000);

})();