Animations on web pages are no more with flash, We are now doing all that things with JavaScript(Jquery animate). As you know we can animate an element in custom paths with the path plugin. Today we will learn How to animate an element in circular path or over a circle using Jquery.

Idea

The jquery path plugin for animation supports custom paths like Arcs, Curves etc. Here in this post i am trying to code a curve like circle.

Code

JavaScript(Jquery)

$("#element").click(
 function(){
           $("#element").animate({
             path : new $.path.arc({
                   center : [200,200],
                   radius : 150,
                   start : 0,
                   end     : -360 * 40,
                   dir : -1
               })
        },40000);
});

Here in this code element is your target element to animate, you can customize the center, radius, start, end and direction.
Do not forget to include path plug-in.

DEMO

You can see the working demo here.