javascript - jQuery.animate 期间的视觉故障

Question

我几乎在 jQuery 中实现了一个向下滑动的抽屉。当您单击标有显示的手柄时，它应该向下展开抽屉，露出内容。单击手柄应将抽屉向上滑动。除了一些视觉故障外，它工作得很好，我不知道它们为什么会发生。请参阅下面的工作示例。

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它改变了heightAND padding。当动画停止时，出于我仍然需要理解的原因，重新应用了正确的填充，突然你可以看到故障。

我不知道为什么会发生这种情况，但我想我知道你如何解决它。不要为 in 设置动画padding，plugin.ui.content而是创建一个内部 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));