JQuery Animate and CSS transition conflict?

I have two divs floated side by side. They are by default each 50% width. When you hover over a div, the active div grows to 70% and the other div shrinks to 30%.

The JS works fine, except I want to add an easing effect with CSS. When I add the CSS transition, the second div breaks on mouseleave (but only when you mouseleve the entire wrapped element.)

My guess is that the combined widths are temporarily greater than 100%, forcing the second div to be pushed under the first floated div.

Any suggestions on how to fix this issue? The code is below, but here's a fiddle to see the issue in action.

http://jsfiddle.net/gFf3n/1/

You can only replicate the bug by mouseing out of the pink box and out of the wrapper entirely.

<div class="wrapper">
    <div class="vail">
        <p class="overview"> I work always </p>
    </div>
     <div class="denver"> 
       <p class="overview"> I break when you mouseleave outside of the box, but work when you mouseleave over to the blue box </p>
    </div>
</div>

var $targets = $('.vail, .denver');
$targets.hover(function() {
    $(this).parent().children().not(this).animate({
        width: "30%"
    },  0);
    $(this).animate({
        width: "70%"
    }, 0);
    $(this).parent().children().not(this).find('.overview').hide();
    $(this).find('.overview').show();
});

$targets.mouseleave(function() {
    $('.overview').hide();
    $targets.animate({
        width: "50%"
    }, 0);
});

.wrapper {
    width: 600px; 
}
.overview {
    display: none;
}
.vail {
    transition: all 0.9s ease;
    background-color: blue;
    color: #fff;
    float: left;
    height: 300px;
    width: 50%;
}
.denver {
    transition: all 0.9s ease;
    background-color: pink;
    float: left;
    height: 300px;
    width: 50%;
}