javascript - jQuery と CSS により、アニメーション後にテキストが奇妙に移動する

Question

ボックスを下にスクロールして元に戻すこのFiddleを作成しましたが、アニメーションが終了すると、テキスト「非表示」と「表示」が少し移動します。いくつかの異なることを試しましたが、正しくスクロールできません。

$('a#mainToggle').click(function(){
    if ($('a#mainToggle').hasClass("down")) {
        $('a#mainToggle').removeClass("down");
        $('a#mainToggle').addClass("up");

        $('#contentCollapse').stop(true, true).animate({height: '30px'},1000,function(){
                $('#contentCollapse').css("display", "none");
                $('a#mainToggle').addClass("hangDown");
        });
        $('a#mainToggle span').text("Show");
        $('#mainToggle em').html("<img src='img/show.gif' />");
    } // end if
    else{
        $('#contentCollapse').css("display", "block");
        curHeight = $('#contentCollapse').height();
        $('a#mainToggle').removeClass("hangDown");
        autoHeight = $('#contentCollapse').css('height', 'auto').height();
        autoHeight = autoHeight + 15;
        $('#contentCollapse').height(curHeight).animate({height: autoHeight}, 1000,function(){
            $('a#mainToggle').addClass("down");
            $('a#mainToggle').removeClass("up");
            $('a#mainToggle span').text("Hide");
            $('#mainToggle em').html("<img src='img/hide.gif' />");
        });
    } // end else
});