jQuery animate widths

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<div class="arrow_box">

</div>

CSS

.arrow_box::before {
	width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent #babec2;
position:absolute;
top:30%;
right:0;
margin-left:16px;
content:'';
}

.arrow_box{
  width:100px;
  height:100px;
cursor:pointer;
border:1px solid black;
position:relative;
}

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','');
    });

});