title: Animation on jQuery Word Replace in a Text
body: <p>I'm pretty new to jQuery but I've managed to find/combine something that does what I want to achieve.</p>
  
  <p>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.</p>
  
  <p>Heres my Code on jsFiddle
  <a href="http://jsfiddle.net/B2eLz/1/" rel="nofollow">http://jsfiddle.net/B2eLz/1/</a></p>
  
  <p>Is there a way to implement a smooth animation that stops the sentence/paragraph from jumping?</p>
  
  <p>Thanks</p>
  
  <p>JS:</p>
  
  <pre><code>$(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
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h3&gt;This is a &lt;span&gt;extraordinary&lt;/span&gt; Headline in a h3-Tag&lt;/h3&gt;
  </code></pre>