18

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?

dippas
  • 58,591
  • 15
  • 114
  • 126
neoDev
  • 2,879
  • 3
  • 33
  • 66
  • `$(document).width()` is same as `100%` did you try that ? – Akshay Jun 03 '15 at 11:13
  • 1
    If I use that, I have to resize it also on window resize.. If I can use calc() It will do it automatically – neoDev Jun 03 '15 at 11:26
  • 2
    I'm afraid `calc` isn't supported by `jQuery animate`. From the manual: `All animated properties should be animated to a single numeric value,` – Ofir Baruch Jun 03 '15 at 11:31
  • @OfirBaruch ....so at this point what is the closest alternative to calc() to have the same result? I mean considering the resizing of the window – neoDev Jun 03 '15 at 11:48
  • You can use the `resize` event: `$(window).on("resize",function(){` and set the css height accordingly. – Ofir Baruch Jun 03 '15 at 12:52

2 Answers2

13

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
});
Boguz
  • 1,600
  • 1
  • 12
  • 25
7

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.

Andrew
  • 1,571
  • 17
  • 31