以某个角度移动，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.

Answer 2

I just wanted to correct a mistake in 32bitkid's otherwise excellent example from the best answer by Yogu.

If Math.PI is divded by -180 (instead of 180) it will result in the correct position for the div. 90 degree angle was moving div down instead of up.

$(function() {
    var dist = 30;
    var angle = 90;
    var x = Math.cos(angle*Math.PI/-180) * dist;
    var y = Math.sin(angle*Math.PI/-180) * dist;
    $("div").animate({'left': '+='+x+'px', 'top': '+='+y+'px'}, 1000);      
})

Here's the updated fiddle: http://jsfiddle.net/9yL8hxnz/