这可能是你的解决方案:
我可以使用每个功能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 –