這可能是你的解決方案:
我可以使用每個功能seperatly,這取決於你所需要的:我使用過開關的2倍。
的HTML:
<div id="container">
<div id="content">
Place your content here
</div>
</div>
的CSS:
#container{
width:0px;
overflow-x:hidden;
display:none;
background-color:blue;
color:white;
}
的JavaScript/jQuery的:
function show(el, width, speed, callback){
$(el).css({"display":"block"});
$(el).animate({"width":width}, speed, callback);
}
function hide(el, speed, callback){
$(el).animate({"width":"0px"}, speed, function(){
$(el).css({"display":"none"});
callback();
});
}
function toggle(el, width, speed, callback){
console.log($(el).css("width"));
if($(el).css("width")== "0px")
show(el,width, speed, callback);
else
hide(el, speed, callback);
}
toggle("#container", "150px", 500, null);
setTimeout(function(){toggle("#container", "150px", 500, null);}, 2000);
工作例如:https://jsfiddle.net/195yz674/3/
我會建議使用jQuery UI HTTPS ://jqueryui.c om/toggle/ – mcgrailm
@mcgrailm謝謝。但是我需要DIV只滑動一次。所以一旦它滑動,我需要它可見,直到用戶退出頁面。 – Becky
http://stackoverflow.com/questions/14823305/slide-div-left-right-using-jquery –