About two years ago I proposed a jQuery solution for dynamically lowering an element with a stated height. The proposed solution worked fine but the resulting code was rather clunky. So here's an updated version.
The solution is simple: prepend an empty element to the target element, assign a given background to the newly created element and animate
its height property:
(function($) {
$.fn.lower = function(options) {
options = $.extend({
speed: 600,
max: '50%',
background: '#fff'
}, options);
return this.each(function() {
var $element = $(this);
$element.prepend('<div class="lower"></div>');
$('div.lower', $element).css('backgroundColor', options.background);
$('div.lower', $element).animate({
height: options.max
}, options.speed);
});
};
})(jQuery);
An example:
$(function() {
$('#content').click(function() {
$(this).lower();
});
});
[view-example url="http://codepen.io/gabrieleromanato/pen/CfhiH"]