title: Using setTimeout to delay timing of jQuery actions
body: <p>I am attempting to delay the swapping of text in a div. It should operate like a slider/carousel for text.</p>
  
  <p>I must have the code wrong, as the final text replacement never happens.</p>
  
  <p>Also, how would I animate introducing the replacement text (window blinds, for eg.)?</p>
  
  <hr>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /&gt;
  
          &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  
      $("#showDiv").click(function() {
          $('#theDiv').show(1000, function() {
              setTimeout(function() {
                  $('#theDiv').html('Here is some replacement text', function() {
                      setTimeout(function() {
                          $('#theDiv').html('More replacement text goes here');
                      }, 2500);
                  });
              }, 2500);
          });
      }); //click function ends
  
  }); //END $(document).ready()
  
          &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
  
      Below me is a DIV called "theDiv".&lt;br&gt;&lt;br&gt;
      &lt;div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;"&gt;
          This text is inside the Div called "theDiv".
      &lt;/div&gt;&lt;br&gt;
      &lt;br&gt;
      &lt;input type="button" id="showDiv" value="Show DIV"&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>