Home/ Questions/Q 632431
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T20:04:32+00:00

So, I wrote a small page: <html> <head> <script type=text/javascript src=jquery.js></script> <script> function slide()

  • 0

So, I wrote a small page: 

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>  

    <script>  
       function slide() {  
          $("#d").slideUp("slow");  
          document.getElementById("d").innerHTML=Math.random();  
          $("#d").slideDown("slow");  
       }   
    </script>  

  </head>  
  <body>  

    <div id="d"></div>  
    <button onClick="slide()">do</button>  

  </body>  
</html>

And I don’t know why but the text inside div is changed before the $("#d").slideDown("slow"), right when the slideUp begins.
I want it to work so that first #d slideUp, then while its height is close to 0 or something the innerHTML will change, and only after that slideDown.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Do it this way:

    function slide() {  
  $("#d").slideUp("slow", function() {
     $(this).html(Math.random).slideDown("slow");  
  });       
}

    Here, the code inside the callback function gets called after the animation is completed. In your original code, this is not the case. The animation gets started and immediately after that the content gets changed.

    Read the documentation about .slideUp()

    Update:

    Btw. document.getElementById is the same as $('#id') in jQuery. You can use the .html() function. No need to look for the same element twice. And the element being animated is available in the callback function via this.

    • 0