window.setInterval & animate

by Alexey Demin

HTML

<div></div>

CSS

div {
 width: 100px;
 height:100px;
 margin:50px;
 border-radius: 5px;
 -webkit-transition: all 1s linear;
}
div > span {
 font-size: 12px;
 font-family: Helvetica, sans-serif;
 text-align: center;
 width: 100px;
 height: 14px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -7px;
 margin-left: -50px;    
}

JavaScript

$(function(){
 
    $("div")
        .data("intervalID", window.setInterval(function(){
          if(arguments.callee.deg == null) {
            arguments.callee.deg = 0;
          } else {
           arguments.callee.deg = arguments.callee.deg + 45;
          }
          arguments.callee.borderRadius = arguments.callee.borderRadius == 5 ? 50 : 5;
          arguments.callee.minBorder = 1;
          arguments.callee.maxBorder = 25;
          arguments.callee.border = arguments.callee.border == arguments.callee.minBorder ? 
                                    arguments.callee.maxBorder : 
                                    arguments.callee.minBorder;
          $("div")
            .attr("class", "")
            .css({
              webkitTransform : "rotate("+arguments.callee.deg+"deg)",
              borderRadius : arguments.callee.borderRadius+"px",
              border:arguments.callee.border+"px solid #000",
              width:(100-(arguments.callee.border*2))+"px",
              height:(100-(arguments.callee.border*2))+"px"
            })
            .html("<span>"+arguments.callee.deg+"°</span>");
        }, 1000))
        .on("click",function(){
         window.clearInterval($("div").data("intervalID"));   
        });
    
});