samuelhauser
5/7/2015 - 6:12 AM

Animate Height/Width to "Auto"

jQuery.fn.animateAuto = function(prop, speed, callback) {
	var elem, height, width;
	return this.each(function(i, el) {
		el = jQuery(el), elem = el.clone().css({'height':'auto','width':'auto'}).appendTo('body');
		height = elem.css('height'),
		width = elem.css('width'),
		elem.remove();

		if (prop === 'height') {
			el.animate({'height':height}, speed, callback);
		}
		else if (prop === 'width') {
			el.animate({'width':width}, speed, callback);
		}
		else if (prop === 'both') {
			el.animate({'width':width,'height':height}, speed, callback);
		}
	});
}

// Usage
$('.animateHeight').bind('click', function(e) {
	$('.test').animateAuto('height', 1000);
});

$('.animateWidth').bind('click', function(e) {
	$('.test').animateAuto('width', 1000);
});

$('.animateBoth').bind('click', function(e) {
	$('.test').animateAuto('both', 1000);
});