javascript animate

by arcm111

HTML

<div id="nav">
    <!--logo_image--> <a class="bg" href="#"><img src="" height="56" width="110" /></a>

    <!---->
    <div style="height:1em;"></div>
    <div style="font-size:1.1em;"><b>Artists</b>
    </div>
    <div style="height:1em;"></div>
    <div><a href="#">Ahnnu</a>
    </div>
    <div><a href="#">Cex</a>
    </div>
    <div><a href="#">Co La</a>
    </div>
    <div><a href="#">Delicate Steve</a>
    </div>
    <div><a href="#">Dope Body</a>
    </div>
    <div><a href="#">Dustin Wong</a>
    </div>
    <div><a href="#">Eachothers</a>
    </div>
    <div><a href="#">En Passant</a>
    </div>
    <div><a href="#">Gem Vision</a>
    </div>
    <div><a href="#">Holy Ghost Party</a>
    </div>
    <div><a href="#">Jimmy Joe Roche</a>
    </div>
    <div><a href="#">Jason Urick</a>
    </div>
    <div><a href="#">Ken Seeno</a>
    </div>
    <div><a href="#">Kid Krusher</a>
    </div>
    <div><a href="#">Lil Jabba</a>
    </div>
    <div><a href="#">Rick Rab</a>
    </div>
    <div><a href="#">Teeth Mountain</a>
    </div>
    <div><a href="#">Teenage Souls</a>
    </div>
    <div style="height:1em;"></div>
    <div style="font-size:1.1em;"><a href="#">INFO</a>
    </div>
</div>

CSS

#nav {
    padding:0;
    position:fixed;
    top:27px;
    left:26px;
    font-family:helvetica;
    font-size:10px;
    background-image:url();
    /*  background-color:red; */
    width:11.1em;
    height:6em;
    overflow:hidden;
    transition: height .4s;
    -webkit-transition: height .4s;
}
#nav a.bg:hover {
    background-color: rgba(0, 0, 0, 0.0);
}
#nav a {
    text-decoration:none;
    color:#000;
}
#nav a:hover {
    background-color:#6a6a6a;
}
#nav div {
    text-indent:0.5em;
    line-height: 1.2em;
}

JavaScript

document.getElementById('nav').onclick = function () {
    this.clicked = (this.clicked == false || undefined) ? true : false;
    var height = (this.clicked == true) ? 6 : 39;
    var i = 0;
    while (i < 100) {
        setTimeout(function () {
            document.getElementById('nav').style.height = i * height / 100 + 'em';
        }, 10);
        i++;
    }
}