jQuery animate() and CSS calc()

Question

I tried to set CSS calc() using jQuery animate, for example:

$element.animate({
    height: \'calc(100% - 30px)\'
}, 500);

and

Answer 1

I was Googling for the answer to this exact question. I saw this link and was like "YES!" Then I saw the answers and was like "no!" Here's what I did, based on your example:

var nextHeight = $element.parent().width()-30;
$element.animate({
    height:nextHeight
}, {duration:500, complete:function(){ $element.width("calc(100% - 30px)"); } });

I know I didn't do EXACTLY what you asked, but it animates to where you want it to animate to and when you finish it's the width you wanted it to be set to. As long as you're not resizing WHILE it's animating, I think it's a decent workaround.