jQuery animate()和CSS calc() [英] jQuery animate() and CSS calc()

问题描述

例如，我尝试使用jQuery动画设置CSS calc():

I tried to set CSS calc() using jQuery animate, for example:

$element.animate({
    height: 'calc(100% - 30px)'
}, 500);

，我注意到calc()不适用于jQuery动画...

and I noticed that calc() is not working with jQuery animate...

我希望有一种方法可以实现，我不想用类似的方法来实现，替代方法或变通方法，我想设置calc()

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?

推荐答案

按要求设置calc()无效.最简单的方法是将其值计算"为变量，如下所示:

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;

然后您可以将animate()与新变量一起使用，如下所示:

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

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

我创建了一个带有示例的CodePen.当您单击较亮的正方形(.animate-me)时，它将动画化为.container高度的100％减去30px. 我希望这就是您想要的...

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

这篇关于jQuery animate()和CSS calc()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！