在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")必须发生切换效果.

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

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