设置高度动画时元素跳跃

我正在尝试实现一个抽屉，当用户单击手柄时它会向下滑动。页面内容也会被向下推，这样就不会重叠。除了抽屉展开/折叠时div#drawer-content跳跃外，其他功能都很好。这是一个小跳跃，但我不知道为什么或如何防止它。

工作示例：http://jsfiddle.net/pFsun/

代码：

var InterestBalanceDrawer = (function($, window, document){
    var drawer, space, handle, interest_list, body;
    var settings = {
        content_height: 250,
        handle_height: 20,
        drawer_height: 30,
        drawer_slim_height: 15
    };
    /**
      * Initialize the drawer element handles and call setup functions.
      */
    var init = function() {
        // We will be moving the body when the drawer expands/collapses
        body = $('body');
        // Container
        drawer = $('<div id="drawer" data-expanded="false"></div>');
        // This is the content container of the drawer
        content = $('<div id="drawer-content"></div>');
        // The button/handle the user clicks on to show/hide the drawer space
        handle = $('<div id="drawer-handle">Show</div>');
        // The list of interests inside the drawer space
        interest_list = $('<ul id="drawer-interest-list"></ul>');
        mockCSS();
        buildInterestList();
        bindUIEvents();
        attachToDOM();
    }
    /**
      * Development only. This will be replaced by real CSS
      */
    var mockCSS = function() {
        drawer.css({
            'height': settings.drawer_height,
            'width': '100%',
            'position': 'relative',
            'margin-bottom': '25px'
        });
        content.css({
            'position': 'relative',
            'background': '#cccccc',
            'height': 0
        });
        handle.css({
            'position': 'absolute',
            'height': settings.handle_height,
            'bottom': '0',
            'padding': '5px',
            'background': '#333',
            'color': '#fff',
            'cursor': 'pointer'
        });
    }
    /**
      * Fetches a list of interests and balances. Builds interest_list
      */
    var buildInterestList = function() {}
    var collapseDrawer = function() {
        drawer.animate({
            'height': '-='+settings.content_height
        });
        content.animate({
            'height': '-='+(settings.content_height)
        });
        handle.text(handle.data('label'));
    }
    var expandDrawer = function() {
        drawer.animate({
            'height': '+='+settings.content_height
        });
        content.animate({
            'height': '+='+(settings.content_height)
        });
        handle.text(handle.data('label'));
    }
    /**
      * All event binding should be defined here
      */
    var bindUIEvents = function() {
        handle.on('click', function(e){
            // Flip the data-expanded value
            drawer.data('expanded', drawer.data('expanded') === true ? false : true);
            // Flip the data-visible value
            handle.data('label', drawer.data('expanded') === true ? 'Hide' : 'Show');
            if(drawer.data('expanded') === true) {
                expandDrawer();
            } else {
                collapseDrawer();
            }
        });
    }
    /**
      * Attached everything together and insert in to the DOM
      */
    var attachToDOM = function() {
        interest_list.appendTo(content);
        content.appendTo(drawer);
        handle.appendTo(drawer);
        var fragment = document.createDocumentFragment();
        drawer.appendTo(fragment);
        body.prepend(fragment);
    }
    // Public variables and methods
    return {
        init: init
    }
})(jQuery, window, document)
InterestBalanceDrawer.init();