Circle Animation
A script which makes a square shaped div run in a circle when it is clicked.
HTML
<div id="hot"></div>
<span></span>
CSS
div {
position: relative;
width: 50px;
height: 50px;
margin-left: 50px;
margin-top: 150px;
background-color: green; }
JavaScript
$(function() {
$("div#hot").click(function() {
function cool() {
var $m= parseFloat($("div").css("marginLeft"));
var $n= parseFloat($("div").css("marginTop"));
if (($m>=50) && ($m<150) && ($n<=150))
$("div").animate({marginLeft: ($m+1)+'px', marginTop:
(150-Math.sqrt(2500-Math.pow($m+1-100,2)))+'px'}, 1, cool);
if (($m<=150) && ($m>50) && ($n>=150))
$("div").animate({marginLeft: ($m-1)+'px', marginTop:
(150+Math.sqrt(2500-Math.pow($m-1-100,2)))+'px'}, 1, cool);
}
cool();
});
});