Hover full expand

HTML

<div id="endtrue" class="blocks">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
</div>

CSS

.blocks>div {
    height: 30px;
    width: 50px;
}
.one {
    background: #e1e1e1;
}
.two {
    background: #c1c1c1;
}
.three {
    background: #d1d1d1;
}

JavaScript

$('.blocks>div').hover(function () {
    var $this = $(this);
    $this.addClass('hover');
    if ($this.hasClass('growing')) {
        $this.stop().removeClass('growing');
    }
    if (!$this.hasClass('shrinking')) {
        $this.addClass('shrinking').animate({ width: '200px' }, function() {
            $this.removeClass('shrinking');
            if (!$this.hasClass('hover')) {
                $this.addClass('growing').animate({ width: '50px' }, function() {
                    $this.removeClass('growing');
                });
            }
        });
    }
}, function () {
    var $this = $(this);
    $this.removeClass('hover');
    if (!$this.hasClass('shrinking')) {
        $this.addClass('growing').animate({ width: '150px' }, function() {
            $this.removeClass('growing');
        });
    }
});