search

Home  >  Q&A  >  body text

javascript - Why does the animation slide out very slowly? Is it a problem with offsetHeight?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style type="text/css">
    .top-nav {
        font-size: 14px;
        font-weight: bold;
        list-style: none;
    }
    .top-nav li {
        float: left;
        margin-left: 1px;
    }
    .top-nav li a {
        line-height: 34px;
        text-decoration: none;
        background: #3f240e;
        color: #fff;
        display: block;
        width: 80px;
        text-align: center;
    }
    .top-nav ul {
        list-style: none;
        display: none;
        padding: 0;
        position: absolute;
        height: 0;
        overflow: hidden;
    }    
    .top-nav li a:hover {
        background: url(images/slide-bg.png) 0 0 repeat-x;
    }
    .note {
        color: #3f240e;
        display: block;
        background: url(images/slide-bg.png) 0 0 repeat-x;
    }
    .corner {
        display: block;
        height: 11px;
        background: url(images/corner.png) 31px 0 no-repeat;
    }
</style>

<script type="text/javascript">
     window.onload = function() {
         var Lis = document.getElementsByTagName("li");
         for(var i=0; i<Lis.length; i++) {
             Lis[i].onmouseover = function() {
                 var u = this.getElementsByTagName("ul")[0];
                 if(u != undefined) {
                 u.style.display = "block";
                 AddH(u.id);    
                 }
                 
             }

             Lis[i].onmouseleave = function() {
                 var u = this.getElementsByTagName("ul")[0];
                 if(u != undefined) {
                 SubH(u.id);    
                 }
                 
             }
         }
     }
    function AddH(id) {
        var ulList = document.getElementById(id);
        var h = ulList.offsetHeight;
        h+=1;
        if(h<43) {
            ulList.style.height = h + "px";
            setTimeout("AddH(' "+id+"')",10);
        }
        else {
            return;
        }
        
    }

    function SubH(id) {
        //setTimeout();
    }
</script>

<body>
    <ul class="top-nav">
    <li><a href="#"><span class="note">慕课网</span></a></li>
    <li><a href="#">课堂大厅</a></li>
    <li><a href="#">学习中心</a>
    <ul id="mnuUL">
        <span class="corner"></span>
        <li><a href="#">前端课程</a></li>
        <li><a href="#">手机开发</a></li>
        <li><a href="#">后台编程</a></li>
    </ul>
    </li>
    <li><a href="#">关于我们</a></li>
    </ul>
</body>
</html>

If the mouse slides back and forth quickly on it, the animation will come out slowly
·TypeError: null is not an object (evaluating 'ulList.offsetHeight')·

大家讲道理大家讲道理2791 days ago666

reply all(2)I'll reply

  • 仅有的幸福

    仅有的幸福2017-05-19 10:16:45

    setTimeout("AddH(' "+id+"')",10);

    AddH(' There is an extra space at the end, so the id assembled by mnuUL you get has an extra space in front of it, resulting in the subsequent id not being obtained and an error being reported

    Cannot read property 'offsetHeight' of null

    reply
    0
  • 迷茫

    迷茫2017-05-19 10:16:45

    It is recommended to use CSS3 animation instead. It is difficult for js timer animation to ensure that the frame rate is consistent in every environment.

    reply
    0
  • Cancelreply