使用 Sprite 的 jQuery - 放置多个效果，可能是语法问题

Question

我正在学习 jQuery，但我仍然遇到无法找到解决方案的问题。这一次，我使用 sprite 为页面设置动画。我可以完成一项工作，但我有两个问题:1)效果不会像它应该的那样在 mouseout 上停止(我希望动画重置并返回灰色)；和2)我不能让它为多个按钮工作。就好像第一个代码仍在运行，不允许第二个(我需要 4 个)启动。

带有两个按钮的 JS Fiddle(已编辑 - 路线固定):http://jsfiddle.net/U9zvL/10/

所以我的脚本有错误/缺少某些东西，我不确定这是否是第二个脚本不起作用的原因。

脚本:

<script  type='text/javascript'>
$(document).ready(function(){
        $("#Q1animation").mouseenter(function() {
            $('#Q1animation').sprite({fps: 18, no_of_frames: 5, play_frames: 5});
            });
        $('#Q1animation').destroy();
        $("#Q1animation").mouseleave(function() {
            $('#Q1animation').spStop(true);
        });
});  
</script>

<script  type='text/javascript'>
$(document).ready(function(){
        $("#Q2animation").mouseenter(function() {
            $('#Q2animation').sprite({fps: 18, no_of_frames: 5, play_frames: 5});
            });
        $('#Q2animation').destroy();
        $("#Q2animation").mouseleave(function() {
            $('#Q2animation').spStop(true);
        });
});  
</script>

感谢您能给我的任何帮助!

Answer 1

在 Chrome 控制台中:

Uncaught TypeError: Cannot convert null to object    jquery.spritely-0.5.js:478

这是一行代码:

destroy: function() {
    var el = $(this);
    var el_id = $(this).attr('id');
    delete $._spritely.instances[el_id] // <--- HERE
    return this;
}

所以看起来问题在于您在对对象调用 spritely 初始化之前尝试 spritely-destroy，而库无法很好地处理该对象。尝试删除 .destroy() 调用(也执行其他代码清理):

$(function() {
    $("#Q1animation, #Q2animation").mouseenter(function() {
        $(this).sprite({
            fps: 18,
            no_of_frames: 5,
            play_frames: 5
        });
    }).mouseleave(function() {
        $(this).spStop(true);
    });
});

演示:http://jsfiddle.net/mattball/9KWp5/

---

编辑 - 开始工作

$(function() {
    $("#Q1animation, #Q2animation").mouseenter(function() {
        $(this).sprite({
            fps: 18,
            no_of_frames: 5,
            play_frames: 5
        });
    }).mouseleave(function() {
        $(this).spStop(true).destroy();
    });
});

演示:http://jsfiddle.net/mattball/7z9xe/