Using JavaScript to "animate" my webpage_问答_开发者

Using JavaScript to "animate" my webpage

开发者 https://www.devze.com 2022-12-13 13:14 出处：网络

I thought I\'d write a simple script to animate my webpage a little. 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 aga

相关专题：javascript

I thought I'd write a simple script to animate my webpage a little.

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.

I'm including a complete example, could you help me fix it?

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

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

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

</html>

Use a standard library like jQuery to do this, don't do it yourself as it won't be cross-browser for sure.

With jQuery, you can do things like this:

$("#div-id").animate({"height": 300}, 1000);

That'll change the div height to 300 px in 1000 ms = 1 second.

Using JavaScript to "animate" my webpage

精彩评论

关注公众号

热门标签

图文推荐

Using JavaScript to "animate" my webpage

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：