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

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
});