在 jquery 中使用 css calc()

Posted 2023-03-06

【中文标题】在 jquery 中使用 css calc()

【英文标题】：Use css calc() in jquery

【发布时间】：2014-03-21 14:36:24

【问题描述】：

我该怎么做？

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

如果只有%或只有px，但不是calc()，我可以这样做，我可以使用jQuery的其他选项吗？还是 javascript 的其他技巧？

这是用户点击某个元素时必须完成的更改，所以：

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

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

【问题讨论】：

您可以创建一个包含 calc 规则的 CSS 规则，向对象添加一个类以使 CSS 规则生效，并为动画使用 CSS3 过渡。

很好的答案，但如果我这样做，我还有另一个问题，那就是我有一些其他动画与 jquery.animate，它们必须匹配速度，并且通过过渡，它看起来不是相同的。无论如何，答案都很好。

【参考方案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 会做动画。

请注意，这不适用于旧版浏览器

【讨论】：

是的，这可以解决问题，但是，当我更改窗口的大小时，没有 % 的行为，这就像给元素一个固定数量的 px 宽度，而不是做 clac()，对不起我的错误解释。

所以，如果我理解正确，您希望有一个 100% 的页面元素减去一些随页面调整大小的像素？

如果@Rickdep 是正确的，那么我想有一个更简单的 CSS 解决方案可以解决您的问题。你能发布一些示例代码供我们查看吗？

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

【参考方案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/

【讨论】：

是的，这可以解决问题，但是，当我更改窗口的大小时，没有 % 的行为，这就像给元素一个固定数量的 px 宽度，而不是做 clac()，对不起我的错误解释。

【参考方案3】：

在@jfriend00 的评论的帮助下，我找到了另一种形式。

首先我创建了 CSS 规则，但没有过渡。

在切换功能中：

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

.acoreonOpened 是我使用 calc (100% - 278px) 的 CSS 规则的地方。

所以，首先我用 jquery 制作动画，当它结束时，我删除 jquery 使用的样式（如果没有，css 将不起作用），然后在我放置类之后，它的行为就像一个宽度%。