I built a box/panel that collapses to the left, but so that the header
keeps visible with a small width.
By default (in expanded state) it should have width: auto.
Collapsing is easy:
boxHeader.animate({width : '19px'}, 'fast');
However: Is there an easy way to expand it back?
It would be very nice if this would work, but it doesn't:
boxHeader.animate({width : 'auto'}, 'fast');
What I have come up with so far seems clumsy and lengthy, which is not
really my impression of jQuery in general:
// Seems jquery cannot animate width/height with target auto.
var smallWidth = boxHeader.css('width'); // So first remember the
current (collapsed) width
boxHeader.css('width', 'auto'); // then temporarily set to auto
var newWidth = boxHeader.width(); // to calculate the desired width
boxHeader.css('width', smallWidth); // then set the collapsed width
again
boxHeader.animate({width : newWidth + "px"}, 'fast', // and animate to
the fixed expanded width
function() {boxHeader.css('width',
'auto');} // but set to auto again when animation is complete
);
Is there a better way?
