jQuery animate() and CSS calc()
Solution 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
});
Solution 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.
Related videos on Youtube
neoDev
Updated on July 07, 2022Comments
-
neoDev almost 2 years
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?
-
neoDev almost 9 yearsIf I use that, I have to resize it also on window resize.. If I can use calc() It will do it automatically
-
Ofir Baruch almost 9 yearsI'm afraid
calc
isn't supported byjQuery animate
. From the manual:All animated properties should be animated to a single numeric value,
-
-
neoDev over 8 yearsThank you mate! Promise I'll test as soon as possible :)
-
CarmenA almost 6 yearsthis is perfect! smart catch.