这个做的时候主要的麻烦应该就是作用域的问题，刚刚做了下，按照你的描述应该是要这种效果吧

<!--动画操作对象-->
<div style="width: 100px;" id="header">
    <p>这里的内容一出之后就隐藏了</p>
</div>
<input id="btn" type="button" value="变换"/><!--动画触发按钮-->

<style>
    /*做一些必要的样式*/
    #header {
        height: 100px;
        overflow: hidden;
        border: 1px solid #f00;
    }
    #header p{
        width: 100px;
    }
</style>

//变量初始化
var btn = document.getElementById('btn');
var navmenu = document.getElementById("header");
var wid = navmenu.style.width;
var timer;
var speed = 0;
wid = parseInt(wid);

//按钮点击触发事件：
btn.onclick = function () {
    //判断点击之前宽度为100时：
    if (wid >= 100) {
        speed = -5;
        timer = setInterval(animation, 50);//以speed=-5执行动画函数
    }
    //判断点击之前的宽度为30时
    if (wid <= 30) {
        speed = 5;
        timer = setInterval(animation, 50);//以speed=5执行动画函数
    }
};
//动画函数：
function animation() {
    wid = wid + speed;
    navmenu.style.width = wid + 'px';
    //宽度增加或减少到一定程度时清除定时器，使宽度不再变化
    if (wid >= 100 || wid <= 30) {
        clearInterval(timer);
    }
}

正是我需要的实现方法,我用JS写给你看看

        var navmenu = document.getElementById("header-sidebar");

        timer = null;

        if(navmenu.style.width=="")

        {

            for(width=0;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); 

        }

貌似你上面的代码就是想这样做的？

如果用js写的话，你试试设定一个定时器，给一个时间，让侧边栏的宽度每次（增加 1px），到一定宽度的时候清除定时器；
同样的方法，再次点击时，侧边栏宽度每次（减少 1px）；
设置侧边栏溢出隐藏就行了；


可以试试

你直接把它的源码抄过来就好了啊