javascript - Move at an angle, jquery, animate()? - Stack Overflow

admin管理员组

文章数量:1025457

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 16, 2012 at 20:55 thelostthelost 70533 gold badges1212 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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.

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/9yL8hxnz/

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 16, 2012 at 20:55 thelostthelost 70533 gold badges1212 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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.

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/9yL8hxnz/

本文标签： javascriptMove at an anglejQueryanimate()Stack Overflow