jQuery animate（）和CSS calc（）

我尝试使用jQuery animate设置CSS

calc（）

，例如：

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

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

我注意到，

calc（）

不能使用jQuery动画…

我希望有一种方法可以做到这一点，我不希望有类似的方法，也不希望有替代方法或解决方法，我希望设置calc（）

这不可能吗？无论如何

如果可能的话，请您演示一下如何操作？

按照您的意愿设置calc（）是行不通的。最简单的方法是将其值“计算”到一个变量中，如下所示：

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

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

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

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

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

我用一个例子创建了一个代码笔。单击打火机正方形（.animate me）时，它将被设置为.container高度减去30px的100%。 我希望这就是你想要的

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

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

---

我在谷歌上搜索这个问题的答案。我看到了这个链接，然后说“是”，然后我看到了答案，然后说“不是”，下面是我所做的，基于你的例子：

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

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

---

我知道我没有完全按照你的要求去做，但它会按照你想要的方向来设置动画，当你完成时，它就是你想要设置的宽度。只要在制作动画时不调整大小，我认为这是一个不错的解决办法

$（document）.width（）

与

100%

相同。您尝试过吗？如果我使用它，我还必须在调整窗口大小时调整它的大小。。如果我可以使用calc（），它会自动执行，

jQuery animate

恐怕不支持

calc

。根据手册：

所有已设置动画的属性都应设置为单个数值，

@OfirBaruch…。因此，在这一点上，最接近calc（）的替代方法是什么？我的意思是，考虑调整窗口的大小，您可以使用

resize

事件：

$（窗口）。在（“resize”，function（）{

，并相应地设置css高度。谢谢你，伙计！我保证会尽快测试：）这太完美了！聪明的捕获。