jQuery.animate期間的視覺故障

Question

我幾乎完成了在jQuery中實現下拉式抽屜的工作。 單擊標有show的手柄時，它應向下擴展抽屜，露出內容。 單擊手柄應將抽屜向后滑動。 除了一些視覺故障外，它的工作效果非常好，我不知道為什么會這樣。 請在下面查看我的工作示例。

http://jsfiddle.net/fKUy9/1/

當您單擊手柄時，抽屜確實滑落了，但是手柄停了下來。 同樣，當上下滑動時，整個抽屜在頁面上上下跳躍，就好像頂部邊距被修改了一樣。 誰能幫我解決這個問題？

碼：

(function($){
    $.cabinet = function(options) {
        plugin = this;

        plugin.ui = {};
        plugin.settings = $.extend({}, $.cabinet.prototype.defaultOptions, (typeof options === 'object') ? options : {});

        plugin.content = function(contentCallback){
            contentCallback(plugin.ui.content);
        }

        var init = function() {
            createHTMLElements();
            bindUIEvents();
            attachToDOM();
            mockCSS();
        }

        var createHTMLElements = function() {
            plugin.ui.body = $('body');
            plugin.ui.drawer = $('<div id="drawer" data-expanded="false"></div>');
            plugin.ui.content = $('<div id="drawer-content"></div>');
            plugin.ui.handle = $('<div id="drawer-handle">Show</div>');
        };

        var mockCSS = function() {
            plugin.ui.drawer.css({
                'height': plugin.settings.collapsed_height,
                'width': plugin.settings.drawer_width,
                'margin': '0 auto',
                'position': 'relative',
                'font-family': 'Helvetica, Verdana, Arial, sans-serif'
            });

            plugin.ui.content.css({
                'background': '#cccccc',
                'height': plugin.settings.collapsed_height,
                'font-size': '.75em'
            });

            plugin.ui.handle.css({
                'height': plugin.settings.collapsed_height,
                'width': plugin.settings.drawer_width,
                'position': 'absolute',
                'bottom': '-1px',
                'left': (plugin.ui.drawer.width()/2) - (plugin.ui.handle.width()/2),
                'text-align': 'center',
                'background': '#333',
                'color': '#fff',
                'cursor': 'pointer',
                'font-size': '.7em',
                'padding-top': '5px',
                'padding-bottom': '5px'
            });
        };

        var bindUIEvents = function() {
            plugin.ui.handle.on('click', function(e){
                plugin.ui.drawer.data('expanded', plugin.ui.drawer.data('expanded') === true ? false : true);
                plugin.ui.handle.data('label', plugin.ui.drawer.data('expanded') === true ? 'Hide' : 'Show');

                if(plugin.ui.drawer.data('expanded') === true) {
                    expandDrawer();
                } else {
                    collapseDrawer();
                }
            });
        };

        var attachToDOM = function() {
            var fragment = document.createDocumentFragment();

            plugin.ui.drawer.appendTo(fragment);
            plugin.ui.content.appendTo(plugin.ui.drawer);
            plugin.ui.handle.appendTo(plugin.ui.drawer);

            plugin.ui.body.prepend(fragment);
        };

        var collapseDrawer = function() {
            var shared_animiations = {
                'height': '-='+plugin.settings.content_height
            }

            plugin.ui.drawer.animate($.extend({}, shared_animiations));

            plugin.ui.content.animate($.extend({
                'padding': 0,
                'overflow': 'hidden'
            }, shared_animiations));

            plugin.ui.handle.text(plugin.ui.handle.data('label'));
        };

        var expandDrawer = function() {
            var shared_animiations = {
                'height': '+='+plugin.settings.content_height
            }

            plugin.ui.drawer.animate($.extend({}, shared_animiations));

            plugin.ui.content.animate($.extend({
                'padding': 25,
            }, shared_animiations));

            plugin.ui.handle.text(plugin.ui.handle.data('label'));
        };

        init();

        return plugin;
    }

    $.cabinet.prototype.defaultOptions = {
        drawer_width: 750,
        content_height: 200,
        handle_height: 15,
        drawer_height: 30
    }
})(jQuery);

Answer 1

看起來當jQuery動畫plugin.ui.content它會更改height和padding 。 當動畫停止時，出於我仍然需要理解的原因，重新應用了適當的填充，突然之間您就可以看到故障。

我不知道為什么會發生這種情況，但是我想我知道您可以解決這個問題。 不要為plugin.ui.content的padding設置動畫，而是創建一個內部div並在其中應用填充。 它應該可以解決問題。

Answer 2

@danielepolencic基本上是正確的。 原因是填充，並且您為抽屜和內容共享了相同的動畫值。 這就是為什么在高度動畫完成后應用填充的原因。 如果將這些值分開，並從抽屜的動畫高度中減去頂部和底部填充，則它應該是理想的效果。 我對你的小提琴進行了更新。

有幫助嗎？

var content_animiations = {
        'height':  plugin.settings.content_height
    },
    drawer_animiations = {
        'height':  plugin.settings.content_height + 50
    };


    plugin.ui.content.animate($.extend({
        'padding': 25,
    }, content_animiations))


    plugin.ui.drawer.animate($.extend({}, drawer_animiations));