Using JavaScript to "animate" my webpage
<p>everyone!
I thought I'd write a simple script to animate my webpage a little.</p>

<p>The basic idea was to make a div grow bigger, when I push a button once and then shrink to it's original size, when I push it again. I handled the growing part well, but I can't get it to shrink again.</p>

<p>I'm including a complete example, could you help me fix it?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

    &lt;head&gt;
        &lt;title&gt;Test&lt;/title&gt;
        &lt;meta http-equiv="Content-Language" content="Estonian" /&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;script type="text/javascript"&gt;
          var i;
          var increasing = new Boolean("true");
          var height;

          function testFunction() {
              height = parseInt(document.getElementById("testDiv").offsetHeight);
              if( increasing == true ) {
                  i = height + 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height &gt;= 304 ) {
                      increasing = false;
                  }
                  else {
                      pause(30);
                  }
              }
              else {
                  i = height - 4;
                  document.getElementById("testDiv").style.height = i + "px";
                  if( height &lt;= 104 ) {
                      increasing = true;
                  }
                  else {
                      pause(30);
                  }
              }
          }
          function pause(ms) {
              setTimeout("testFunction()", ms);
          } 
        &lt;/script&gt;
        &lt;button id="button" type="button" onclick="testFunction();"&gt;Do it!&lt;/button.
        &lt;div id="testDiv" style="border: 2px solid black; width: 400px; height: 100px; text-align: center;"&gt;
           Hello!
        &lt;/div&gt;
    &lt;/body&gt;

&lt;/html&gt;
</code></pre>
