slideUp is choppy - but slideDown and slideToggle are fine - no styles applied

Question

I have a div that looks good when animated with slideToggle, and slideDown, but slideUp looks bad.

By bad I mean that while the boundaries of the div change smoothly, the words inside the div shift position and disappear quickly one by one.

Highlighting the div in Chrome Developer Tools/Firebug, it appears something is reducing the width of the element at the same time as the height.

I read about problems with padding and margin on animations, but there aren't any on these elements.

here's the jQuery from document.ready:

$(".vertical-more").attr("href","#more-content").click(function () {
    var toggleId = $(this).attr("id");
    //console.log("toggleId: " + toggleId + " IcanhazClass: " + $(this).hasClass("vertical-more-on"));
    var pseudoId = "." + toggleId;

    if ($(this).hasClass("close-others")) {

        $(".vertical-more-info").hide(300);

        if ($(this).hasClass("vertical-more-on")) {
            $(this).removeClass("vertical-more-on");
            $(pseudoId).slideUp(300);
        } else {
            $(pseudoId).slideDown(300);
            $("a.vertical-more").removeClass("vertical-more-on");
            $(this).addClass("vertical-more-on");
        }

    } else {
        $(this).toggleClass("vertical-more-on");
        $(pseudoId).slideToggle(300);
    }

});

the HTML:

   <div class="specials-column">
        <h2>what's the deal?</h2>
        <div class="one-special">
            <div class="opposite-image">
                <span class="headline">blah</span>
                <a id="toggle-1" class="vertical-more close-others" href="savings">details</a>
            </div>
            <img class="special-image" src="specials/specials_overnight_90x63"/>
            <div id="overnight-info" class="vertical-more-info toggle-1">
                <h5>scooby</h5>
                <br />
                <span class="fine-print">
                yadda yadda
                </span>
            </div>
        </div><!-- div.one-special -->
        <div class="special-border">
            &nbsp;
        </div><!-- div.special-border -->
        <div class="one-special second-special">
            <div class="opposite-image">
                <span class="headline">and so forth</span>
                <a id="toggle-2" class="vertical-more close-others" href="savings">details</a>
            </div>
            <img class="special-image" src="specials/specials_ziptrips_90x63.jpg"/>
            <div id="ziptrip-info" class="vertical-more-info toggle-2">
                <h5>more info.</h5>
                Talk talk
             </div>
        </div><!-- div.one-special -->
        <div class="special-border">
            &nbsp;
        </div><!-- div.special-border -->
        <div class="all-specials">
            <a class="more" target="blank" href="@zipfleet_url@savings">See more</a>
        </div>
    </div><!-- div.specials-column -->

and the CSS:

a.vertical-more {
    background: transparent url(/images/template/css/icon_sm_arrow_down.gif) no-repeat right 5px;
    padding-right: 11px;
    width: auto;
}
a.vertical-more-on {
    background: transparent url(/images/template/css/icon_sm_arrow_up.gif) no-repeat right 5px;
}
.vertical-more-info {
    display: none;
}
/* put this stuff into a noscript tag for non-JS goodness
a.vertical-more:hover div#specific-item-id {
    display: inline;
}
*/
.fine-print {
    color: #4D4D4F;
    font-size: 0.846em;
}


#wholeoverlay {
    position: relative;
    float: left;
    height: 415px;
    width: 940px;
}
.specials-wrapper {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.reservations-landing-page .specials-column {
    float: right;
    margin-top: 1em;
    position: relative;
}
.one-special {
    text-align: left;
}
.one-special .opposite-image {
    float: right;
    height: 63px;
    padding-bottom: 4px;
    position: relative;
    width:  95px;
}
.one-special .headline {
    color: #4FA600;
    float: right;
    font-size: 1.2em;
    font-weight: bold;
}
.one-special img.special-image {
    border: 1px solid #BCACA3;
    height: 63px;
    padding: 3px;
    width:  90px;
}
.second-special {
    padding-top: 10px;
}
.special-border {
    border-bottom: 2px solid #D8D9DA;
    margin: 0 9px 0 -9px;
    padding-left: 6px;
    width: 213px;
}
.line-wrapper {
    border-bottom: 2px solid #D8D9DA;
}
.more-info {
    font-size: 0.85em;
}
.fine-print {
    line-height: 1.25;
}
.all-specials {
    height: 16px;
    margin-top: 5px;
}
.all-specials a {
    float: left;
}
.special-deets {
    width: 300px;
}
a.vertical-more {
    bottom: 0px;
    height: 10px;
    position: absolute;
}
.vertical-more-info {
    margin-top: 5px;
}