title: jQuery. Text changes before animation. Incorrect order of effects
body: <p>It's my first post so let me say Hello! everyone ;)</p>
  
  <p>I have problem with animation. I would like to reach this effect:</p>
  
  <ol>
  <li>show text "Lorem ipsum 1" and then animate it to 'opacity: 0'</li>
  <li>run delay</li>
  <li>change text to "Lorem ipsum 2" when it is not visible</li>
  <li>show text using animate to 'opacity: 1'</li>
  </ol>
  
  <p>But my code changes text on a very beginning. So I can't even see "Lorem ipsum 1".</p>
  
  <p>I've tried to add .stop() and .queue() code but also doesn't work correctly(or I didn't use it right way).</p>
  
  <p>I'll be appreciate for advise and explain why code is not execute step by step and how to get it.</p>
  
  <pre><code>$(document).ready(function(){
    $('body').append('&lt;p&gt;Lorem ipsum 1&lt;/p&gt;');
  
    $('p')
      .animate({opacity: '0'}, 'slow')
      .delay(1000)
      .text('Lorem ipsum 2')
      .animate({opacity: '1'}, 'slow');
    });
  </code></pre>