Where is the best place to create a sprite ready for animation?

Question

I am working on a site and I have animations using:

spriteOnHover (Sprite on Hover) – jQuery plugin

My issue is that my animation stops and I have a feeling that is it the way the PNG is set up.

As you can see from these the link:

http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease/ <= my animation is the beaker!

it is not animating correctly!

Do you think it is my sprite? As there is a warning on the plugin site that says this

"Attention: The spriteOnHover jquery plugin will autodetect how many frames your sprite has, based on the orientation parameter, but it’s crucial that every frame has the exactly same size as the others. For now, multi-line sprites are not supported."

Hope someone can help,

Many thanks,

Ben.

Also, here is a continuous animation that works using spritely but not using on hover state: http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease2/ — Tired_Man, Apr 06 '14 at 06:49

score 1 · Accepted Answer · answered Apr 07 '14 at 06:41

Thanks for this, I am now just using a gif and a static png for hover state: see my fiddle http://jsfiddle.net/P4aZC/

<img id="beaker" src="http://benjaminedwardswebdesign.co.uk/testimg/BeakerStart.png" />  

    $(document).ready(function()
{
    $("#beaker").hover(
        function()
        {
            $(this).attr("src", "http://benjaminedwardswebdesign.co.uk/testimg/BeakerAni.gif");
        },
        function()
        {
            $(this).attr("src", "http://benjaminedwardswebdesign.co.uk/testimg/BeakerStart.png");
        }                         
    );                  
});

score 0 · Answer 2 · answered Apr 06 '14 at 07:14

0

Loading your moveplease page yeilds a 404 error:

Failed to load resource: the server responded with a status of 404 (Not Found)

for http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease/images/beakerFinal.png

For your other page you are using: http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease2/images/beaker.png (note beaker.png versus beakerFinal.png

answered Apr 06 '14 at 07:14

Jason Aller

3,541
28
38
38

Ah sorry about this! I will check it out - thank you for your comment. – Tired_Man Apr 06 '14 at 09:42
This should work fine: http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease2 and this too http://www.benjaminedwardswebdesign.co.uk/testsites/moveplease/ Please let me know if you can see it. Thank you. – Tired_Man Apr 06 '14 at 09:43
The beaker is now visible on both pages. The page with the pencil and beaker is generating a lot of `Uncaught TypeError: Cannot call method 'split' of undefined` errors. – Jason Aller Apr 06 '14 at 14:46

Where is the best place to create a sprite ready for animation?

2 Answers2