在 jquery 中使用 css calc()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21911407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use css calc() in jquery
提问by Albert Cortada
How can I do this?
我怎样才能做到这一点？
$('#element').animate({ "width": "calc(100% - 278px)" }, 800);
$('#element').animate({ "width": "calc(100% - 78px)" }, 800);
I can do it if it's only %or only px, but not calc(), can I use some other option of jQuery? or some other trick of JavaScript?
如果它是 only%或 only px，我可以这样做，但不能calc()，我可以使用 jQuery 的其他一些选项吗？或者其他一些 JavaScript 技巧？
It's a change that have to be done when the user clicks some element, so:
这是当用户单击某个元素时必须完成的更改，因此：
$("#otherElement").on("click", FunctionToToggle);
when the user clicks the $("#otherElement")the toggle effect has to occur.
当用户单击时，$("#otherElement")必须发生切换效果。
回答by Rickert
maybe this helps:
也许这有帮助：
$('#element').animate({ "width": "-=278px" }, 800);
every time this script will remove 278px from the element
每次此脚本将从元素中删除 278px
edit: Try this it will recalculate when the window is resized. If i understand you correctly that should help.
编辑：试试这个它会在调整窗口大小时重新计算。如果我理解正确，那应该会有所帮助。
$(window).on("resize",function(){
$('#element').css("width",$('#element').width()-275+"px");
});
CSS3 option
CSS3 选项
Since CSS3 has an animateion function you could also use this:
因为 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;
}
If you want to animate the element. And you could do this:
如果要为元素设置动画。你可以这样做：
$('#element').css("width","calc(100% - 100px)");
In this case the CSS will do the animation.
在这种情况下，CSS 将执行动画。
Please notice that this will not work for older browsers
请注意，这不适用于旧浏览器
回答by Joe Cullinan
I'm not sure using calcis going to work out. My answer checks the parent's width, then performs an operation on it, and then animates the element.
我不确定使用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
回答by Albert Cortada
I have found another form of doing it with the help of the coment of @jfriend00.
在@jfriend00 的评论的帮助下，我找到了另一种形式。
First I create the rule of CSS but without transition.
首先，我创建了 CSS 规则，但没有过渡。
And in the funcion of the toggle:
在切换功能中：
$('#element').animate({ width: "-=200px" }, 800, function () { $('#element').addClass('acoreonOpened');$('#element').removeAttr("style") });
.acoreonOpened is where I have the CSS rule with calc (100% - 278px).
.acoreonOpened 是我使用 calc (100% - 278px) 的 CSS 规则的地方。
So, first i make the animation with jquery, and when it ends, i remove the style that jquery uses (if not, the css will not work), and after i put the class, so it behaves like a width with %.
所以，首先我用 jquery 制作动画，当它结束时，我删除了 jquery 使用的样式（如果没有，css 将不起作用），并且在我放置类之后，它的行为就像一个带有 % 的宽度。
