Robot Animation

HTML

<script src="http://www.egstudio.biz/wp-content/uploads/2011/04/robo_head.png"></script>
<a id="head" class="demo"></span>

CSS

/* main item */
#mainitem { height:420px; position:relative; background: url(../img/robo_bg.png) no-repeat top left; }
#head { height: 121px; width: 118px; position: absolute; top: 81px; left:407px; background: url('http://www.egstudio.biz/wp-content/uploads/2011/04/robo_head.png') no-repeat top left;   }

JavaScript

/** Robot Animation **/
var z = doAnimation();
var t;
function doAnimation(){
    t = setTimeout(animateRobo, 400);
}
function animateRobo(){
    var num = Math.floor(Math.random()*5);
      switch(num){
          case 0:
              $("#head").css("background-position", "0 -121px");
              break;
          case 1:
              $("#head").css("background-position", "0 -242px");
              break;
          case 2:
              $("#head").css("background-position", "0 -363px");
              break;
          case 3:
              $("#head").css("background-position", "0 -484px");
              break;
          case 4:
              $("#head").css("background-position", "bottom left");
              break;
          default:
              $("#head").css("background-position", "top left");
              break;
      }
      var x = doAnimation();
  }
function stopAnimation(){
    clearTimeout(t);
    $("#head").css("background-position", "bottom left");
    return false;
}
$("a.demo").hover(function(){ stopAnimation() }, function(){ doAnimation() });