Blind with negative margins

I'm using JQuery UI so that I can slide down a div using the blind function, however, it's not working properly.

Here's the JSFiddle I started: http://jsfiddle.net/CBe3w/192/

For some reason, the sides don't register until the sliding animation is done, at which point they pop out. How can I make it so that the sides are registered from start to finish (they should always be the width of the box class)?

HTML:

<div class="box">
    Click Me!
    <div class="footer">
        Why does it do this?
    </div>
</div>

CSS:

.box {
    background: #f5f5f5;
    width: 250px;
    padding: 25px;
}

.footer {
    background: red;
    padding: 15px 25px;
    margin-top: 25px;
    margin-left: -25px;
    margin-right: -25px;
    display: none;
}

JS:

$('.box').click(function() {
    $('.footer').toggle("blind");
});