jQuery animate()和CSS calc()

Question

我尝试calc()使用jQuery animate 设置CSS ,例如:

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

而且我注意到它calc()不适用于jQuery动画......

我希望有一种方法可以做到这一点,我不希望以类似的方式去做,替代或解决方法,我想设置calc()

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

如果有可能,请告诉我们如何？

Answer 1

设置你想要的calc()是行不通的.最简单的方法是将它的值"计算"为变量,如下所示:

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

那么你可以使用animate()和新变量,如下所示:

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

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

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

我知道我并没有完全按照你的要求去做，但它会根据你想要的动画位置进行动画处理，当你完成时，它就是你想要设置的宽度。只要您在动画播放时不调整大小，我认为这是一个不错的解决方法。