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

问题

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.

回答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.

回答2:

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.

来源：https://stackoverflow.com/questions/6433720/why-does-jquery-spritely-animation-plays-an-extra-frame-on-second-mouseenter

标签

javascript

jquery

css-sprites