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 in Java by Soham
• 8,730 points
132 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 by Rahul
• 8,980 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 in Java by gaurav
• 13,460 points
47 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
4,571 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,350 points
253 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
7,997 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,500 points
294 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,720 points
8,334 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,720 points
15,185 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,720 points
1,186 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 in Java by Rahul
• 8,980 points
137 views
0 votes
1 answer

How to split a string in Java

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

answered Feb 9 in Java by Rahul
• 8,980 points
37 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP