在jquery中使用css calc（）

我怎样才能做到这一点？

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

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

当用户点击某个元素时，必须进行更改，因此：

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

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

Answer 1

也许这有助于：

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

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

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

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

CSS3选项

由于CSS3具有动画function，您还可以使用：

 #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将执行动画。

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

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/

Answer 3

在@jfriend00的帮助下，我找到了另一种forms。

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

在切换的function：

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

.acoreonOpened是我使用calc（100％ – 278px）的CSS规则的地方。

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