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 I noticed that calc() is not working with jQuery animate...

I hope that there is a way to do it, I don't want a similar way to do it, an alternative or a workaround, I want to set calc()

Is this impossible? In any way?

If it is possible, please can you show how?

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

Answer 2

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.