Move at an angle, jquery, animate()?

Question

is there a way to specify the angle when using

$(this).animate({'left': '+=30px'}, 1000);

I would like

$(this).animate({'48': '+=30px'}, 1000);

the 48 would be the angle

Answer 1

You can specify both left and top property:

$(this).animate({left: '+=30px', top: '+=30px'}, 1000);

In this case, the angle would be 45°.

To specify a different angle, first calculate cos(α) and sin(α). The cosinus specifies how far you have to go right, and the sinus how far to go up, to make a distance of 1 pixel in the specified angle. If you want to cover 30 pixels distance instead, multiply the sinus and cosinus results by 30.