Abraham Uribe Blog: jQuery rotate element

Animate element to rotate clockwise and anticlockwise with jquery.animate
Random animation and callback
Example:

Rotate.js

$.fx.step['degree']=function(fx){
    if(! fx.deg){
        fx.deg=0;
        if($(fx.elem).data("degree")){
            fx.deg=$(fx.elem).data("degree")
        }   
    }
    $(fx.elem).css({"WebkitTransform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-moz-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)","-ms-transform":"rotate("+Math.floor(fx.deg+(fx.end*fx.pos))+"deg)"});
    $(fx.elem).data("degree",Math.floor(fx.deg+(fx.end*fx.pos)));
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="rotate.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
      rotate(Math.floor(Math.random()*720)-360);
      function rotate(r){
           var random=Math.floor(Math.random()*720)-360;
          $("#wheel").animate({"degree":r},1000,function(){rotate(random)});
      }
});
</script>
</head>
<body>

style.css

#wheel{
    width:300px;
    height:300px;
    display:block;
    background:url("gear.png");
}

jQuery rotate element

0 Comments

Fb Comments

Publicar un comentario