Object position animation with 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. Sort of showing where something is located.

Is jQuery capable of such animation or should I look into other libraries?

Answer 1

How to center: Using jQuery to center a DIV on the screen

How to rotate: Rotating a Div Element in jQuery

Since it's just a simple shape I'd recommend raphaeljs. That'll work in most browsers (even IE 6).

Answer 2

yes jquery is capable of providing such type of animations, you can make animation with .animate() method of jquery. http://docs.jquery.com/Effects/animate

put the code at which the arrow should move (it's destination position) in that .animate method. eg. use it in .animate method

$('#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/

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