用JQ写的简单的收起拉开

用JQ写的简单的收起拉开

html：

<div class="box">
	<h3 class="shouqi">收起</h3>
	<h3 id="lakai" style="display: none;">拉开</h3>
</div>

css：

.box{
	width: 200px;
	height: 400px;
	background: pink;
	position: fixed;
	top: 100px;
	right: 0;
}
h3{
	position: absolute;
	top: 120px;
	left: -36px;
	cursor: pointer;
}

JS:

$('.shouqi').click(function(){
	$('.box').animate({right:'-195'},100,function(){
			$('.shouqi').hide()
			$('#lakai').show()
		})
})
$('#lakai').click(function(){
	$('.box').animate({right:'0'},100,function(){
		$('.shouqi').show()
		$('#lakai').hide()
	})
})