Easy Image Sprite Animation On Hover Using jQuery - spriteControl

spriteControl is a jQuery & jQuery UI widget used to animate an image sprite frame by frame on mouse hover. Easy to use, cross browser and highly customizable.

How to use it:

1. Prepare a sprite sheet that consists of multiple frames in one image. 

2. Add the image sprite as a background image to your container.

.sprite {
  display: block;
  background: url(sprite.jpg) 0 0 no-repeat;
  width: 218px;
  height: 200px;
}

3. Include jQuery, jQuery UI and the jQuery spriteControl widget at the bottom of the web page.

<script src="/path/to/jquery-1.11.3.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="/path/to/spriteControl.js"></script>

4. Enable the sprite animation on hover.

$(".sprite").spriteControl({
  // Options here
});   

5. Here is a list of available options with default values to customize the sprite animation.

$(".sprite").spriteControl({

  // the number of frames
  allsteps: 10,

  // Set size in pixels for each frame
  step: 110,

  // infinite loop
  loop: false,

  // reverse animation
  reverse: true,

  // horizontal or vertical image
  horizontalImg: true
  
});   

---

This awesome jQuery plugin is developed by nmcobalt. For more Advanced Usages, please check the demo page or visit the official website.