Use css calc() in jquery

Question

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?

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.

Answer 1

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.

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

CSS3 option

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

In this case the CSS will do the animation.

Please notice that this will not work for older browsers

Answer 2

I'm not sure using calc is going to work out. My answer checks the parent's width, then performs an operation on it, and then animates the element.

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

I have found another form of doing it with the help of the coment of @jfriend00.

First I create the rule of CSS but without transition.

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

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