jQuery using sprites - putting more than one effect, can be a syntax problem

I'm studying jQuery, but I still encounter issues I can't find a solution for. This time, I'm using sprites to animate a page. I can make one work, but I have two problems: 1) The effect doesn't stop on mouseout as it should (I would like the animation to reset and go back to grey); and 2) I can't make it work for more than one button. It's like the first code is still running and won't allow the second (I need 4) to start.

JS Fiddle with two buttons (edited - route fixed): http://jsfid开发者_开发知识库dle.net/U9zvL/10/

So my script has an error / is missing something, and I'm not sure if that's the cause why the second script doesn't work.

Scripts:

<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>

Thank you for ANY help you can give me!

---

In the Chrome console:

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

which is this line of code:

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

so it looks like the problem is that you're trying to spritely-destroy before you have called spritely initialization on the object, which the library does not handle well. Try removing the .destroy() calls (other code cleanup performed as well):

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

Demo: http://jsfiddle.net/mattball/9KWp5/

---

Edit - got it working

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

Demo: http://jsfiddle.net/mattball/7z9xe/

---

you're going to face palm yourself for this but, the css in your jsfiddle script show be:

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

and not

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

Edit: I did get the same error as @Matt Ball with the .destroy() comment these lines out allows both to work. However the animations only run once