Question

我正在研究jQuery，但我仍然遇到无法找到解决方案的问题。这次，我正在使用精灵为页面设置动画。我可以做一件事，但我有两个问题： 1）效果不会像鼠标一样停止（我希望动画重置并返回灰色）;和 2）我不能让它工作多个按钮。这就像第一个代码仍在运行，并且不允许第二个代码（我需要4个）启动。

JS小提琴有两个按钮（编辑 - 路线固定）：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/

Answer 2

你要为此自己面对，但你的jsfiddle脚本中的css显示为：

http://metrosafety-dev.co.uk/images/custom/Q2sprite.png

而不是

http://metrosafety-dev.co.uk/images/custom/custom/Q2sprite.png

编辑：我确实得到了与@Matt Ball相同的错误，并带有.destroy（）注释这些行允许两者都有效。但是动画只运行一次

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

2 个答案:

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

编辑 - 让它正常工作