0

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?

DavidW
  • 4,855
  • 13
  • 44
  • 67

2 Answers2

0

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).

Community
  • 1
  • 1
Thomas
  • 6,550
  • 1
  • 23
  • 42
0

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

Bhavesh G
  • 2,844
  • 4
  • 35
  • 63