SO jQuery animate widths with CSS
Animate widths with Javascript and CSS transitions
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<div class="container openLeft">
<div class="row">
<div class="span12">
<p class="closeLeft"><button class="btn btn-large" type="button" id="closeTrigger">Close 'Em</button></p>
<p class="openLeft"><button class="btn btn-large" type="button" id="openTrigger">Open 'Em</button></p>
</div>
</div>
<div class="row">
<div class="span9 to-enlarge">right</div>
</div>
</div>
CSS
.container{
overflow:hidden;
color:black;
}
.to-hide {
background-color: #999;
}
.to-enlarge {
background-color: #ccc;
}
/* ------------------- */
/* show / hide buttons */
/* ------------------- */
.container.closeLeft p.closeLeft{
display:none;}
.container.openLeft p.openLeft{
display:none;}
/* -----------------*/
/* Close Left */
/* -----------------*/
.closeLeft .span3{
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
margin-left:-200px;
width:0;
overflow:hidden;
}
.closeLeft .span9{
width:940px;
}
/* -----------------*/
/* Open Left */
/* -----------------*/
.openLeft .span9{
width:700px;
}
/* -----------------*/
/* -----------------*/
/* CSS Transitions */
/* -----------------*/
.span3{
transition: all 2.5s;
-moz-transition:all 2.5s; /* Firefox 4 */;
-webkit-transition: all 2.5s; /* Safari and Chrome */
-o-transition: all 2.5s; /* Opera */
}
.span9{
transition: all 2s;
-moz-transition:all 2s; /* Firefox 4 */;
-webkit-transition: all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
}
JavaScript
$("#closeTrigger").click(function() {
$('.container').removeClass('openLeft').addClass('closeLeft');
});
$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');
});