Animation on jQuery Word Replace in a Text

Question

I'm pretty new to jQuery but I've managed to find/combine something that does what I want to achieve.

The script replaces a word in a text/headline in a loop. It fades Out, updates the text and fades In again - but my problem is: that the sentence, getting shorter or longer, causes a jumping of the headline or a whole paragraph.

Heres my Code on jsFiddle http://jsfiddle.net/B2eLz/1/

Is there a way to implement a smooth animation that stops the sentence/paragraph from jumping?

Thanks

JS:

$(function(){
var words = [
        'breathtaking',
        'excellent',
        'awesome',
        'nice',
        'cool',
        'sweet',
        'extraordinary'
        ], i = 0; // i for counting

    setInterval(function(){
        $('span').fadeOut(function(){ //fadeout text
            $(this).html(words[i=(i+1)%words.length]).fadeIn(); //update, count and fadeIn
        });
    }, 2000 ); //2s
});

HTML:

<h3>This is a <span>extraordinary</span> Headline in a h3-Tag</h3>

Answer 1

The problem is the <span> itself is fading & collapsing not just the content in it. I would slightly rework the code so only the content inside the <span> fades and the actual width of the span with the word is set by jQuery. That way the content fades but the <span> itself shunts the empty space width without collapse. Will attempt to fork & see what I can do.

EDIT: Okay, this is not perfect, but the issue is different words will simply have different lengths. But the concept of keeping the <span> the same width does work. You need to refine for your needs. Here is what I have done: http://jsfiddle.net/rHtYA/17/

For the CSS I adjusted span to have a display, text-align & a width setting:

span {
    color:red;
    display: inline-block;
    text-align:center;
    width: 120px;
}