I am working with CSS sprites and the jQuery plugin spritely.
I have a Super Mario image and when rolled over, I'd like the animation to play. When, you move your mouse away from the Super Mario (which is a <div>
element), I would like the animation to play in reverse back to the original place it started.
Here is what I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Mario Planet Spritely Nav</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.spritely-0.5.js"></script>
<script>
$(document).ready(function() {
$('#mario').hover(
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: 6
});
},
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: 5,
rewind: true
});
}
);
});
</script>
<style>
#mario {
position: absolute;
width: 40px;
height: 52px;
background: transparent url(mh.png);
cursor: pointer;
}
</style>
</head>
<body>
<div id="mario"></div>
</body>
</html>
I have the fps intentionally slow so I can try and figure out what's going on here. For some reason, the first hover and mouseout work great. But then, during the second hover, something weird happens. It appears to play an extra frame. I don't understand why.
Here is my mh.png
image (I don't have a current webserver to show a live demo):
Do you guys have any idea as to why this is occurring?
Thanks.