JQuery Sprite Sheet Animation

Sprite Sheet is alarger image for combining multiple individual images into a single, efficiently laid out image.

The Original Image:

The Final Result:

The Source Code:

<!DOCTYPE html>
<html>
<!-- Don't Break My b***s - Gimme Code! Project                                              -->
<!-- Author: Andrea Tonin - http://blog.lucedigitale.com                                     -->
<!-- This code come with absolutely no warranty                                              -->
<!-- If you use this code in your project please give a link to http://blog.lucedigitale.com -->
<!-- Thanks in advance                                                                       -->
<head>
<title>JQuery Sprite Animation</title>

<style type="text/css" media="screen">
#anim {
 width: 159px; /* Animation Container - width and height of a single frame */
 height: 196px;
 background: url(css/images-gimme-code-2013-0012/anim.png) no-repeat 0 0; /* A sprite as background image */
}
</style>
 
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
 
<script> 
$(document).ready(function(){
  $('#anim').mouseenter(function() {
  /* ####################################################*/
  /* Timer to change the x position of the sprite START */
  $(function() {
  
  /* Array for the x position. Step is a width of single frame x number of frame */
  /* The sprite image - anim.png - is width:2544px  height:196px */
  var steps = [0, 159, 318, 477, 636, 795, 954, 1113, 1272, 1431, 1590, 1749, 1908, 2067, 2226, 2385, 2544];
  var index = -1;  
  var interval = setTimeout(function() {
  
     index++;
     
     if(index == 16) {     
       index = 0;    
     }
  
     /* Move the background image fron right to left */
    $('#anim').css('backgroundPosition', '-' + steps[index] + 'px 0px');
    
    setTimeout(arguments.callee, 70); /* Set the Animation Speed */
  
  }, 25);
  });
  /* Timer to change the x position of the sprite END */
  /* ####################################################*/
  });
});
</script>  
 
</head>
 
<body>
<p>JQuery Sprite Animation - Animate Image on Mouse Enter</p>
<div id="anim">&nbsp;</div>
</body>
 
</html>
DEMO

 

My official WebSite >