在jQuery中使用css calc() [英] Use css calc() in jquery

问题描述

我该怎么做?

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

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

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?

这是用户单击某些元素时必须进行的更改，因此:

It's a change that have to be done when the user clicks some element, so:

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

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

when the user clicks the $("#otherElement") the toggle effect has to occur.

推荐答案

也许有帮助:

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

每次该脚本将从元素中删除278px

every time this script will remove 278px from the element

尝试此操作，它将在调整窗口大小时重新计算.如果我正确理解您的意见，将会有所帮助.

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选项

由于CSS3具有动画功能，因此您也可以使用以下功能:

Since CSS3 has an animateion function you could also use this:

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

在这种情况下，CSS将制作动画.

In this case the CSS will do the animation.

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

这篇关于在jQuery中使用css calc()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！