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
  • 5,069
  • 14
  • 46
  • 68

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
  • 8,426
  • 1
  • 25
  • 49
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
  • 3,000
  • 4
  • 39
  • 66