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.

Answer 2

Setting calc() like you want won't work. The easiest way to do it is to "calculate" it's value into a variable, something like this:

var newHeight = $('.container').height() - 30;

then you can use the animate() with the new variable, something like this:

$('.animate-me').animate({
  height: newHeight
}, 500);

I have created a CodePen with an example. When you click the lighter square ( .animate-me ) it will get animated to 100% of the .container's height minus 30px. I hope this is what you were looking for...

http://codepen.io/anon/pen/JYqPxm

If you want it to work also on window resize and you are using global variables, then you can just update the variables from inside a resize function, like so:

$(window).on("resize",function() {
  // update all variables that you need
});