Why does jQuery spritely animation plays an extra frame on second mouseenter?

Question

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 mous

Answer 1

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.