javascript - 设置高度动画时元素跳跃

Question

我正在尝试实现一个抽屉，当用户单击 handle 时，该抽屉会向下滑动。页面内容也会被下推，因此不会重叠。除了当抽屉展开/折叠时 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();

Answer 1

这与 body 或 ul 或两者消失和重新出现的边距/填充有关。

请参阅:http://jsfiddle.net/pFsun/2/