Question

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

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

我发现calc()无法使用jQuery动画...

我希望有办法做到这一点，我不希望以类似的方式去做，替代或解决方法，我想设置calc（）

这不可能吗？无论如何？

如果有可能，请告诉您如何？

Answer 1

设置calc（）就像你想要的一样。最简单的方法是＆＃34;计算＆＃34;它变成了变量的值，如下所示：

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

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

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

我用一个例子创建了一个CodePen。当你点击较亮的方块（.animate-me）时，它将被动画为100％的.container高度减去30px。我希望这就是你要找的......

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

如果你想让它在窗口大小调整上工作并且你正在使用全局变量，那么你可以从resize函数内部更新变量，如下所示：

$(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)"); } });

我知道我没有完全按照你的要求做到，但是它会动画到你希望它动画制作的位置，当你完成它时，它是你想要设置的宽度。只要你没有调整它的动画，我认为这是一个不错的解决方法。

jQuery animate（）和CSS calc（）

2 个答案: