jquery实现侧边栏左右伸缩效果的示例

更新时间：2020-06-20 01:12:01 作者：startmvc

jquery实现点击侧边栏伸缩效果。点击收缩，侧边栏向左收缩，显示按钮显示；点击显示按钮

jquery实现点击侧边栏伸缩效果。点击收缩，侧边栏向左收缩，显示按钮显示；点击显示按钮，显示按钮向左收缩，侧边栏显示。

具体代码如下：


<!DOCTYPE html>
<html>
	<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
 <style>
 *{margin: 0;padding: 0;}
 #box{width: 100%;height: 100%;}
 #left{width: 200px;float: left;background-color: royalblue;position: relative;}
 #btn{width: 100%;height: 50px;background-color: darkgoldenrod;line-height: 50px;text-align: center;color: white;cursor: pointer;}
 #btnb{width: 50px;height: 50px;background-color: red;position: absolute;cursor: pointer;left: -50px;line-height: 50px;text-align: center;}

 </style>
	</head>
	<body>
 <div id="box">
 <div id="left">
 <div id="btn">收缩</div>
 </div>
 <div id="btnb">
 显示
 </div>
 </div>
 <script type="text/javascript">
 $(function(){
 $a = $(window).height();
 $("#left").height($a);
 $("#btn").click(function(){
 $("#left").animate({left:'-200px'});
 $("#btnb").delay(500).animate({left:'0'});
 });
 $("#btnb").click(function(){
 $("#btnb").animate({left:'-50px'});
 $("#left").delay(500).animate({left:'0'});
 });
 });
 </script>
	</body>
</html>

效果图：