使用jQuery / javascript的对象位置动画

Question

I was wondering if there is a way to animate a div (image of an arrow) so that it will appear in the middle of the page and then point to any object I want (rotate towards it) and move towards it. 我想知道是否有一种方法可以使div（箭头图像）动起来，使其显示在页面中间，然后指向我想要的任何对象（朝它旋转）并朝它移动。 Sort of showing where something is located. 显示某种东西的位置。

Is jQuery capable of such animation or should I look into other libraries? jQuery是否具有这种动画功能，还是应该研究其他库？

Answer 1

How to center: Using jQuery to center a DIV on the screen 如何居中：使用jQuery在屏幕上居中放置DIV

How to rotate: Rotating a Div Element in jQuery 如何旋转：在jQuery中旋转Div元素

Since it's just a simple shape I'd recommend raphaeljs. 由于它只是一个简单的形状，因此我建议使用raphaeljs。 That'll work in most browsers (even IE 6). 在大多数浏览器（甚至是IE 6）中都可以使用。

Answer 2

yes jquery is capable of providing such type of animations, you can make animation with .animate() method of jquery. 是的，jquery能够提供此类动画，您可以使用jquery的.animate()方法制作动画。 http://docs.jquery.com/Effects/animate http://docs.jquery.com/Effects/animate

put the code at which the arrow should move (it's destination position) in that .animate method. 在该.animate方法中放置箭头应移动的代码（目标位置）。 eg. 例如。 use it in .animate method 在.animate方法中使用

$('#arrow').css({
 '-moz-transform':'rotate(80deg)',
 '-webkit-transform':'rotate(80deg)',
 '-o-transform':'rotate(80deg)',
 '-ms-transform':'rotate(80deg)'
});

there is examples are available for rotating, 有可以旋转的例子，

live rotate and other css demo brillian http://css3please.com/ 实时旋转和其他CSS演示Brillian http://css3please.com/

http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

使用jQuery / javascript的对象位置动画

问题描述

2 个解决方案

解决方案1
0 2012-06-19 07:00:26

解决方案2
0 2012-06-19 07:00:35

使用jQuery / javascript的对象位置动画

问题描述

2 个解决方案

解决方案1 0 2012-06-19 07:00:26

解决方案2 0 2012-06-19 07:00:35

解决方案1
0 2012-06-19 07:00:26

解决方案2
0 2012-06-19 07:00:35