SpriteAnimation.htm

﻿<!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>
	<title>Sprite Animation Demo</title>
	<style type="text/css">
		.Explode
		{
			position:absolute; 
			width:64px; 
			height:64px; 
			background:transparent url('Images/explodeSprite.png') repeat-x scroll 0 0; 
			top:10px; 
			left:280px;
			z-index:150;
			display:none; 
		}   
	</style>
	<script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	    $(document).ready(function (e) {

	        $("#textExplotion").click(function () {
	            var Explotion = $(".Explode");
	            var step = 64; // explotion size
	            var current = 1024;
	            var imageWidth = 1024; // sprite width           
	            var scrollSpeed = 150;

	            Explotion.show();
	            var ExplotionId = setInterval(scrollBg, scrollSpeed);

	            function scrollBg() {
	                current -= step;
	                if (current == 0) {
	                    clearInterval(ExplotionId);
	                    Explotion.hide();
	                }
	                Explotion.css("background-position", current + "px 0");
	            }

	        });
	    });
	</script>
</head>
<body>
	<input id="textExplotion" type="button" value="Start animation" />
    <div class="Explode"></div>
</body>
</html>