Question

我正在使用CSS sprites和jQuery插件spritely。

我有一个超级马里奥图像，当翻过来时，我想要播放动画。当你将鼠标从超级马里奥（这是<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故意慢，所以我可以试着弄清楚这里发生了什么。出于某种原因，第一个悬停和鼠标移动工作很棒。但是，在第二次悬停期间，发生了一些奇怪的事情。它似乎发挥了额外的框架。我不明白为什么。

这是我的mh.png图片（我没有当前的网络服务器来展示现场演示）：

你们有没有想过为什么会这样？

感谢。

Answer 1

我碰巧是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
        });
    }
);

编辑：我刚刚意识到之前发布的解决方案或多或少相同！不知道为什么这对你不起作用。它对我有用。

Answer 2

对此特定问题的简短回答是，您需要在第一次鼠标悬停后将鼠标悬停和鼠标输出事件的帧设置为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
        });
    }
);

这将摆脱“额外的框架”。但是，您有一个更深层次的问题，即快速悬停和关闭会导致帧不同步。如果你能以某种方式“重置”鼠标悬停的第一帧然后从那里动画，那将是很好的。

为什么jQuery spritely动画在第二个mouseenter上播放额外的帧？

2 个答案: