css - jQuery animate() 和 CSS calc()

Question

我尝试calc()使用 jQuery animate 设置 CSS，例如：

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

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

我希望有办法做到这一点，我不想要类似的方法，替代方案或解决方法，我想设置 calc()

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

如果可能的话，请你能告诉我怎么做吗？

Answer 1

像你想要的那样设置 calc() 是行不通的。最简单的方法是将它的值“计算”到一个变量中，如下所示：

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

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

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

我创建了一个带有示例的 CodePen。当您单击较浅的正方形 ( .animate-me ) 时，它将被设置为 .container 高度的 100% 减去 30 像素。我希望这就是你要找的...

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

如果您希望它也适用于窗口调整大小并且您正在使用全局变量，那么您可以从调整大小函数内部更新变量，如下所示：

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

Answer 2

我在谷歌上搜索这个确切问题的答案。我看到了这个链接，就像“是的！” 然后我看到了答案，就像“不！” 根据您的示例，这是我所做的：

var nextHeight = $element.parent().width()-30;
$element.animate({
    height:nextHeight
}, {duration:500, complete:function(){ $element.width("calc(100% - 30px)"); } });

我知道我没有完全按照您的要求进行操作，但是它会动画到您想要动画到的位置，并且当您完成时，它就是您想要设置的宽度。只要您在动画时不调整大小，我认为这是一个不错的解决方法。