为什么jQuery精灵动画会在第二个mouseenter上播放额外的帧?

| 我正在使用CSS精灵和jQuery插件。 我有一个超级马里奥图像,当滑过时,我想播放动画。当您将鼠标从“超级马里奥”(这是一个
<div>
元素)移开时,我希望动画反向播放回其开始的原始位置。 这是我到目前为止的内容:
<!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>
我故意使fps变慢,因此我可以尝试弄清楚这里发生了什么。由于某些原因,第一个悬停和鼠标移出效果很好。但是,在第二次悬停期间,发生了一些奇怪的事情。它似乎播放了额外的帧。我不明白为什么。 这是我的2幅图片(我没有当前的网络服务器来显示实时演示): 你们对为什么会发生有任何想法吗? 谢谢。     
已邀请:
        我碰巧是Spritely开发人员之一-也许我可以帮上忙! 这是由于运行Sprite时play_frames值不同而引起的。诚然,这很令人困惑。我会尝试解释。 最初调用精灵时,它将播放前6帧。再次将鼠标移出时,它将后退5帧。到目前为止一切都很好。但是事情变得不同步,因此当您播放下一个6时,您的声音比预期的还要高一帧。 以下解决方案可以为您解决该问题,
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
        });
    }
);
编辑:我刚刚意识到,以前发布的解决方案大致相同!不知道为什么这对您不起作用。它为我工作。     
        对于此特定问题的简短答案是,您需要在第一次鼠标悬停后将mouseover和mouseout事件的帧均设置为5。
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
        });
    }
);
这将消除“多余的帧”。但是,您还有一个更深的问题,那就是,快速地上下悬停会导致帧不同步。如果您能以某种方式“重置”到鼠标悬停的第一帧,然后从那里进行动画处理,那就太好了。     

要回复问题请先登录注册