Home/ Questions/Q 6063225
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:08:29+00:00

I am working with CSS sprites and the jQuery plugin spritely . I have

  • 0

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):

mh.png

Do you guys have any idea as to why this is occurring?

Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I happen to be one of the Spritely developers — perhaps I can be of some help!

    This is happening because of the different play_frames values when running the Sprite. Admittedly it is quite confusing. I’ll try and explain.

    When you initially call sprite, it will play the first 6 frames. When you mouse out again, it will go back by 5 frames. All is good so far. But things get out of sync, and so when you play the next 6, you are one frame further than expected.

    The following solution should fix it for you,

    var play_frames = 6;

$('#mario').hover(
    function() {
        $('#mario').sprite({
            fps: 2,
            no_of_frames: 6,
            play_frames: play_frames
        });
        play_frames = 5;
    },
    function() {
        $('#mario').sprite({
            fps: 2,
            no_of_frames: 6,
            play_frames: 5,
            rewind: true
        });
    }
);

    Edit: I have just realized that the solution posted previously is more or less the same! Not sure why this would not work for you. It is working for me.

    • 0