Using setTimeout to delay timing of jQuery actions

Question

I have been attempting to try and delay the swapping of text in a div. It should work like a slider/carousel for text. I assume I must have not used the correct code, as the final text replacement never occurs. I would need help additionally in animating the introducing the replacement text with window blinds for example. Any leads will be appreciated. Have shared my code below:-

<html> 
        <head> 
                  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
                  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
                  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> 
  
                  <script type="text/javascript"> 
$(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()

            </script> 
    </head> 
<body>

            Below me is a DIV called "theDiv".<br><br> 
          <div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;"> 
                  This text is inside the Div called "theDiv". 
</div><br> 
<br> 
<input type="button" id="showDiv" value="Show DIV"> 

</body> 
</html>

Rahul · Answer 1 · Feb 9, 2022

To answer your question, the .html() only takes a string OR a function as an argument and not both of them together. To get rid of this problem, try this:

$("#showDiv").click(function () { 
      $('#theDiv').show(1000, function () { 
            setTimeout(function () { 
                  $('#theDiv').html(function () { 
                        setTimeout(function () { 
                              $('#theDiv').html('Here is some replacement text'); 
                          }, 0); 
                          setTimeout(function () { 
                                $('#theDiv').html('More replacement text goes here'); 
                        }, 2500); 
                } ); 
            }, 2500); 
        }); 
  }); //click function ends