css - jQuery animate()和CSS calc()

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

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

而且我注意到calc()不适用于jQuery animate ...

我希望有一种方法可以实现，我不希望使用类似的方法，也可以选择替代方法或解决方法，我想设置calc()

这不可能吗？以任何方式？

如果可以的话，请您说明如何？

最佳答案

随意设置calc()无效。最简单的方法是将其值“计算”为变量，如下所示:

var newHeight = $('.container').height() - 30;

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

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

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

http://codepen.io/anon/pen/JYqPxm

如果您希望它也能在窗口调整大小上工作并且正在使用全局变量，则可以从调整大小函数内部更新变量，如下所示:

$(window).on("resize",function() {
  // update all variables that you need
});