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
});