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.