css3 transition demo

<link rel="stylesheet" href="todomvc/site/css/bootstrap.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<style type="text/css">
	.sidebar_slider {
		top: 0px;
		position: absolute;
		font-weight: bold;
		padding: 25px 0;
		text-align: left;
		width: 203px;
	}
	#main {
		position: relative;
	}
	#content {
		width: 79.8%;
		background-color: #C09853;
		border: 1px solid red;
		transition: width 0.3s ease 0s;
	}
	#content.show {
		width: 100%;
	}
	#right_slider {
		width: 20%;
		transition: width 0.3s ease 0s;
	}
	#right_slider.hide_mode {
		width: 0px;
	}
</style>
<input type="button" value="change" id="change" />
<input type="button" value="change2" id="change2" />
<h2> fffssss </h2>
<div class="span1">
	ss
</div>
<div id="main" class="span10" style="background-color: #ccc">
	dd
	<div id="content" class="">
		ccc
	</div>
	<div id="right_slider" class="span11 sidebar_slider " style="position: absolute;right:0px;background-color: pink">
		ff
	</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$("#change").click(function() {

		$("#right_slider").addClass("hide_mode");
		$("#content").addClass("show");
	})
	$("#change2").click(function() {
		$("#right_slider").removeClass("hide_mode");
		$("#content").removeClass("show");
	})
</script>