Albert Cortada Albert Cortada - 1 month ago 4x
CSS Question

Use css calc() in jquery

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
, but not
, 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);

when the user clicks the
the toggle effect has to occur.


maybe this helps:

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

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.


CSS3 option

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

   -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.

Please notice that this will not work for older browsers