javascript - Visual glitches during jQuery.animate -
i'm done implementing slide down drawer in jquery. when click handle labeled show, should expand drawer downwards, exposing content. clicking handle should slide drawer up. works great except couple visual glitches , don't know why happening. please see working example below.
when click on handle, drawer slide down expected handle stops short. also, when sliding , down, drawer whole jumps , down on page if top margin being modified. can me fix this?
code:
(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);
@danielepolencic right. reason padding , shared same animation values both drawer , content. why padding applied after height animation finished. if separate values , subtract top , bottom padding animation height drawer, should desired effect. did update fiddle .
did help?
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));
Comments
Post a Comment