html - Javascript怎么实现滑动效果的方法？

Question

慕课网某个大神回复：设定一个定时器，给一个时间，让侧边栏的宽度每次（增加 1px），到一定宽度的时候清除定时器；同样的方法，再次点击时，侧边栏宽度每次（减少 1px）,设置侧边栏溢出隐藏.
原来的JS代码没有动画效果：

<code>           var navmenu = document.getElementById("header-sidebar");
               if(navmenu.style.width=="")
                   {
                       navmenu.style.width= 50 + 'px';
                   }else{
                       navmenu.style.width="";
               }</code>

下面加上滑动效果的代码，不过这个代码实现不了。不知道哪里有问题

<code>        var navmenu = document.getElementById("header-sidebar");
        timer = null;
        if(navmenu.style.width=="")
        {
            for(width=160;width>50;width--)
            timer = setInterval(function() {
                navmenu.style.width= width + 'px';
             }, 50);
        }else{
            for(width=50;width<160;width++)
            timer = setInterval(function() {
                navmenu.style.width= width + 'px';
             }, 50);
        }</code>

不知道怎么解决，请各位大神帮忙修改。

Answer 1

动画效果使用css3控制动画过度时间