Issue with jQuery .animate command

Question

I was using the animate command for jQuery and for some reason this doesn't work:

$('#my_div_id').animate({left:'calc(50% + 50px)'}, 1000);

Is there any way to get around this?

I know the code works if i put '50%', or '50px', but I want my div to animate to 50% of the screen + 50px.

Thanks in advance!

Answer 1

It would seem that calc cannot be animated, but fortunately it's easy for you to calculate 50% of the width of the screen already since you have the power of JavaScript.

$("#my_div_id").animate({left: $("body").width() / 2 + 50 + "px"}, 1000);

This assumes that #my_div_id is positioned relative to the body (ie no relative position ancestory -- otherwise you would have to use that).

Answer 2

Basically nothing new, but using the explicit request of the asker, to set it to 50% of the screen width:

var width = screen.width / 2 + 50;
$('#my_div_id').animate({left: width + "px"}, 1000);