Experts Exchange connects you with the people and services you need so you can get back to work.

how to display a sprite animation on a web page via jquery

how does one display (see attached image) as an animation on a web page using jquery please
bot-explode.png

Johnny

Asked: 2010-11-16

Advertise Here

1 Solution

LVL 83

leakim971PluritechnicianCommented: 2010-11-16

You may play with CSS and backgroundPosition-x

Test page :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
img.boom
{
	width:23px;
	height:28px;
	background:url(bot-explode.png) 0 0;
}
</style>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script language="javascript">
	setInterval("badaboum()",100);
	var nbSprites = 7;
	var widthSprite = 23;
	function badaboum() {
		var x = parseInt($(".boom").css("backgroundPosition-x").replace("px","")) + 23;
		if( x >= nbSprites*widthSprite ) {
			$(".boom").css("backgroundPosition-x", "0px");
		}
		else {
			$(".boom").css("backgroundPosition-x", x+"px");
		}
	}
</script>
</head>
<body bgcolor="#BBBBBB">
<img class="boom" />
</body>
</html>

Open in new window

JohnnyAuthor Commented: 2010-11-16

@leakim971

how does one place it anyplace on the screen? please

seams to work well thank you

JohnnyAuthor Commented: 2010-11-16

thank you

LVL 83

leakim971PluritechnicianCommented: 2010-11-16

>how does one place it anyplace on the screen?

css :
position:absolute;
left:100px;
right:128px;

You can set multiple css attribute : $(".boom").css({"left":posX+"px","top":posY+"px","position":"absolute","backgroundPosition-x":x+"px"});
where posX, posY and x are variable

thanks for the points!

JohnnyAuthor Commented: 2010-11-16

did i miss something as this does not work

<script language="javascript">
        setInterval("badaboum()",100);
        var nbSprites = 7;
        var widthSprite = 23;
        var posX = 120;
        var posY = 120;
        function badaboum() {
                var x = parseInt($(".boom").css("backgroundPosition-x").replace("px","")) + 23;
                if( x >= nbSprites*widthSprite ) {
                        $(".boom").css({"left":posX+"px","top":posY+"px","position":"absolute","backgroundPosition-x", "0px");
                }
                else {
                        $(".boom").css({"left":posX+"px","top":posY+"px","position":"absolute","backgroundPosition-x", x+"px");
                }
        }
</script>

Open in new window

thank you for the help

LVL 83

leakim971PluritechnicianCommented: 2010-11-16

if( x >= nbSprites*widthSprite ) {
$(".boom").css({"left":posX+"px","top":posY+"px","position":"absolute","backgroundPosition-x":"0px"});
}
else {
$(".boom").css({"left":posX+"px","top":posY+"px","position":"absolute","backgroundPosition-x":x+"px"});
}