jQuery animate() 和 CSS calc()答案

【问题标题】：jQuery animate() and CSS calc()jQuery animate() 和 CSS calc()
【发布时间】：2015-08-17 13:30:07
【问题描述】：

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

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

我注意到 calc() 不能与 jQuery animate 一起使用...

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

这不可能吗？有什么办法吗？

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

【问题讨论】：

$(document).width() 与 100% 相同，您尝试过吗？
如果我使用它，我必须在窗口调整大小时也调整它的大小。如果我可以使用 calc() 它会自动完成
恐怕calc 不受jQuery animate 的支持。来自手册：All animated properties should be animated to a single numeric value,
@OfirBaruch ....那么在这一点上，最接近 calc() 的替代方案是什么？我的意思是考虑调整窗口大小
您可以使用resize事件：$(window).on("resize",function(){并相应地设置css高度。

标签： css jquery-animate css-calc

【解决方案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
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢你，伙计！保证我会尽快测试:)
这太完美了！聪明的捕捉。