這個做的時候主要的麻煩應該就是作用域的問題，剛剛做了下，按照你的描述應該是要這種效果吧

<!--動畫操作對象-->
<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）；
設置側邊欄溢出隱藏就行了；


可以試試

你直接把它的源碼抄過來就好了啊