這個(gè)做的時(shí)候主要的麻煩應(yīng)該就是作用域的問(wèn)題，剛剛做了下，按照你的描述應(yīng)該是要這種效果吧

<!--動(dòng)畫(huà)操作對(duì)象-->
<div?style="width:?100px;"?id="header">
????<p>這里的內(nèi)容一出之后就隱藏了</p>
</div>
<input?id="btn"?type="button"?value="變換"/><!--動(dòng)畫(huà)觸發(fā)按鈕-->

<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);

//按鈕點(diǎn)擊觸發(fā)事件：
btn.onclick?=?function?()?{
????//判斷點(diǎn)擊之前寬度為100時(shí)：
????if?(wid?>=?100)?{
????????speed?=?-5;
????????timer?=?setInterval(animation,?50);//以speed=-5執(zhí)行動(dòng)畫(huà)函數(shù)
????}
????//判斷點(diǎn)擊之前的寬度為30時(shí)
????if?(wid?<=?30)?{
????????speed?=?5;
????????timer?=?setInterval(animation,?50);//以speed=5執(zhí)行動(dòng)畫(huà)函數(shù)
????}
};
//動(dòng)畫(huà)函數(shù)：
function?animation()?{
????wid?=?wid?+?speed;
????navmenu.style.width?=?wid?+?'px';
????//寬度增加或減少到一定程度時(shí)清除定時(shí)器，使寬度不再變化
????if?(wid?>=?100?||?wid?<=?30)?{
????????clearInterval(timer);
????}
}

正是我需要的實(shí)現(xiàn)方法,我用JS寫(xiě)給你看看

? ? ? ? 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寫(xiě)的話，你試試設(shè)定一個(gè)定時(shí)器，給一個(gè)時(shí)間，讓側(cè)邊欄的寬度每次（增加?1px），到一定寬度的時(shí)候清除定時(shí)器；
同樣的方法，再次點(diǎn)擊時(shí)，側(cè)邊欄寬度每次（減少?1px）；
設(shè)置側(cè)邊欄溢出隱藏就行了；


可以試試

你直接把它的源碼抄過(guò)來(lái)就好了啊