在jQuery中使用css calc()

Question

我该怎么做？

$('#element').animate({ "width": "calc(100% - 278px)" }, 800);
$('#element').animate({ "width": "calc(100% - 78px)" }, 800);

如果只是 % 或者只是 px，我可以做到，但是如果有 calc()，我能使用 jQuery 的其他选项吗？或者 JavaScript 的其他技巧？

这是必须在用户点击某个元素时进行的更改：

$("#otherElement").on("click", FunctionToToggle);

当用户点击$("#otherElement")时，切换效果必须发生。

- Albert Cortada

---

你可以在CSS规则中使用calc规则，为对象添加一个类以使CSS规则生效，并使用CSS3过渡实现动画效果。 - jfriend00

很棒的答案，但是我还有一个问题，如果我这样做，那就是我有一些其他的jquery.animate动画，它们必须匹配速度，而使用transition，它们看起来不一样。无论如何，非常感谢您的回答。 - Albert Cortada

Answer 1

或许这可以帮助你：

$('#element').animate({ "width": "-=278px" }, 800);

每次运行该脚本都会从元素中减去278px。

编辑： 尝试这个，它将在窗口调整大小时重新计算。如果我理解你的意思正确的话，这应该有所帮助。

$(window).on("resize",function(){
   $('#element').css("width",$('#element').width()-275+"px");
});

CSS3选项

由于CSS3具有动画函数，因此您也可以使用此选项：

#element{
   -webkit-transition:all 500ms ease-out 0.5s;
   -moz-transition:all 500ms ease-out 0.5s;
   -o-transition:all 500ms ease-out 0.5s;
   transition:all 500ms ease-out 0.5s;
}

如果您想要让元素动起来。 您可以这样做：

 $('#element').css("width","calc(100% - 100px)");

在这种情况下，CSS 将执行动画。

请注意，这对于旧版浏览器无效。

- Rickert

---

是的，那样做可以解决问题，但是当我改变窗口大小时，它没有百分比的行为，就像使用px给元素固定宽度一样，而不是使用clac()。抱歉我的解释不太清楚。 - Albert Cortada

如果我理解你的意思是，你想要一个元素，它的大小是页面大小减去一些随着页面改变而调整的像素？ - Rickert

如果@Rickdep是正确的，那么我想你的问题可能有一个更简单的CSS解决方案。你能否发布一些样本代码供我们查看？ - Joe Cullinan

对于那些想要为 calc() 添加动态大小的人，似乎这个方法可行：$my_element.css("height","calc(100vh - " + offset_top + "px)");。 - user1063287

Answer 2

我不确定使用calc会行得通。我的答案检查父元素的宽度，执行一项操作，然后对该元素进行动画处理。

elWidth = $('#element').parent().width(); // Get the parent size instead of using 100%
elWidth -= 20; // Perform any modifications you need here
$('#element').animate({width: elWidth}, 500); //Animate the element

http://jsfiddle.net/yKVz2/2/

- Joe Cullinan

---

是的，那样做可以解决问题，但是当我改变窗口大小时，它没有百分比的行为，就像使用px给元素固定宽度一样，而不是使用clac()。抱歉我的解释不太清楚。 - Albert Cortada

Answer 3

我发现了另一种方法，借助于@jfriend00的评论。

首先，我创建了没有转换的CSS规则。

然后在切换的函数中：

$('#element').animate({ width: "-=200px" }, 800, function () { $('#element').addClass('acoreonOpened');$('#element').removeAttr("style") });

.acoreonOpened是我使用calc (100% - 278px)的CSS规则所在的位置。

因此，首先我使用jquery创建动画，当动画结束时，我会删除jquery使用的样式（如果不这样做，CSS将无法工作），然后我会添加类，使其表现为带有百分比的宽度。

- Albert Cortada