使用jQuery/javascript实现对象位置动画

Question

我想知道是否有一种方法可以使div (箭头图像)具有动画效果，这样它就会出现在页面的中间，然后指向任何我想要的对象(朝它旋转)并向它移动。某种程度上显示了某物的位置。

jQuery能做这样的动画吗?或者我应该看看其他库？

Answer 1

如何居中：Using jQuery to center a DIV on the screen

如何旋转：Rotating a Div Element in jQuery

因为它只是一个简单的形状，所以我推荐raphaeljs。这将适用于大多数浏览器(甚至IE6)。

Answer 2

是的，jquery能够提供这种类型的动画，你可以使用jquery的.animate()方法来制作动画。http://docs.jquery.com/Effects/animate

将箭头应移动的代码(其目标位置)放入该.animate方法中。例如：在.animate方法中使用它

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

有一些例子可以用来旋转，

live rotate and other css demo brillian http://css3please.com/

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