Using setTimeout to delay timing of jQuery actions

0 votes

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>
Feb 9, 2022 in Java by Soham
• 9,710 points
1,884 views

1 answer to this question.

0 votes

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

answered Feb 9, 2022 by Rahul
• 9,680 points

Related Questions In Java

0 votes
1 answer

Using setTimeout to delay timing of jQuery actions

The JavaScript setTimeout () function  is used ...READ MORE

answered May 30, 2022 in Java by gaurav
• 23,260 points
7,982 views
0 votes
1 answer

How to call a method after a delay in Android using Java?

final Handler handler = new Handler(); handler.postDelayed(new Runnable() ...READ MORE

answered Jun 11, 2018 in Java by Akrati
• 3,190 points
5,337 views
0 votes
1 answer

How to get the IP address of the machine using Java?

One approach is to use NetworkInterface.getNetworkInterfaces() to get all ...READ MORE

answered Jun 25, 2018 in Java by sharth
• 3,370 points
979 views
+2 votes
2 answers

How to connect to Oracle using Service Name instead of SID?

HII.. I hope this information may help you- Thin-style ...READ MORE

answered Sep 29, 2020 in Java by SRI
10,098 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,315 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
15,710 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
23,295 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,840 points
3,311 views
0 votes
1 answer

Failed to load resource: the server responded with a status of 404 (not found)

In order to avoid an error while ...READ MORE

answered Feb 8, 2022 in Java by Rahul
• 9,680 points
2,095 views
0 votes
1 answer

How to split a string in Java

By using the appropriate method, this can ...READ MORE

answered Feb 9, 2022 in Java by Rahul
• 9,680 points

edited Jul 6, 2023 by Khan Sarfaraz 740 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP