JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style>
body{
font-family: 'Droid Serif', Cambria, Georgia, Palatino, 'Palatino Linotype', 'Myriad Pro', serif;
}
a{
text-decoration:none;
color:green;
}
a:hover{
text-decoration:underline;
}
#me{
top:70px;
left:100px;
cursor:pointer;
position:absolute;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/weepy/jquery.path/raw/master/jquery.path.js"></script>
</head>
<body>
<a href="http://www.motyar.info/2010/08/jquery-animate-in-circular-path.html">
<h1>Click the gem to animate in Circular path</h2>
</a>
<div id="me" ><img src="http://3.bp.blogspot.com/_6MI_wk7Bhcc/TG6g-szsbcI/AAAAAAAAAoA/5HXGdkhpo8g/s1600/motyar.png" /></div>
<script>
$(function() {
$("#me").click(
function(){
$("#me").animate({
path : new $.path.arc({
center : [200,200],
radius : 150,
start : 0,
end : -360 * 40,
dir : -1
})
},40000);
}
);
});
</script>
</body>
</html>
JavaScript
$(function() {
$("#me").click(
function(){
$("#me").animate({
path : new $.path.arc({
center : [200,200],
radius : 150,
start : 0,
end : -360 * 40,
dir : -1
})
},40000);
}
);
});