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

The short answer to this particular problem is that you need to set the frames to 5 for both the mouseover and mouseout event after the first mouseover.

var frms = 6;

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

This will get rid of the "extra frame." However you have a deeper problem in that quickly hovering over and off causes the frames to get out of sync. It would be good if you could somehow "reset" to the first frame on mouseover and then animate from there.

Answer 2

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.