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.
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
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With