jQuery animate widths

by mark47

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">

    <div class="row">
        <div class="span12">
            <p><button class="btn btn-large" type="button" id="moveTrigger">Move 'Em</button></p>
        </div>
    </div>
    <div class="row">
        <div class="span6 leftbox">
            <div class="to-hide">left</div></div>
        <div class="span6 rightbox">
            <div class="to-enlarge">right</div></div>           
    </div>
</div>

CSS

.to-hide {
    background-color: blue;  
}
.to-enlarge {
    background-color: red;
}

JavaScript

$("#moveTrigger").click(function() {
    // Left box animates to 0 width
    $(".leftbox").animate({
        "width": "0%"
    }, "slow", function() {
        // Hide when width animation finishes
        $(this).hide();
    });
    // Right box expands. Tinkered with add span12 after animation is complete
    $(".rightbox").animate({
        "width": "90%"
    }, "slow", function() {
$(this).removeClass('span6').addClass('span12').css('width','');
    });

});