Animating sprite using Spritely

Question

I am using Spritely to animate sprites. I have managed to pan successfully however my final job is to create 'stars' that fade in and out. I have created a sprite sheet:

I followed the documentation found here and altered the number of frames and the frames per second.

$('#star').sprite({fps: 24, no_of_frames: 12});

My issue is that the sprite's animation is both jerky and doesn't seem to follow the sprite image, which should fade in and then out. Presently it jerks between semi visible and fully.

I used Chrome's console to log the frames and I only seem to get frames 0,1 and 2. I would have expected 12 frames (one per image in the sprite) but I am new to this so I might be mistaken. It doesn't seem to reach the last frame either according to the logs.

Here is my code in full:

(function($) {
        $(document).ready(function() {           
           $('.purplestar').sprite({
                fps: 24, 
                no_of_frames: 12,
                start_at_frame: 0,
                        on_first_frame: function(obj) {
                            if (window.console) {
                                console.log('first frame');
                            }
                        },
                        on_last_frame: function(obj) {
                            if (window.console) {
                                console.log('last frame');
                            }
                        },
                        on_frame: {
                            2: function(obj) {
                                if (window.console) {
                                    console.log('frame 2');
                                }
                            },
                            1: function(obj) {
                                if (window.console) {
                                    console.log('frame 1');
                                }
                            },
                            0: function(obj) {
                                if (window.console) {
                                    console.log('frame 0');
                                }
                            },
                            3: function(obj) {
                                if (window.console) {
                                    console.log('frame 3');
                                }
                            }
                        }
            });

           $('#balloonleft').pan({fps: 30, speed: 4, dir: 'up', depth: 70});
           $('#balloonright').pan({fps: 30, speed: 3, dir: 'up', depth: 70});
           $('#bird')
                    .sprite({
                        fps: 9, 
                        no_of_frames: 3,
                        // the following are optional: new in version 0.6...
                        start_at_frame: 2
                    })
                    .spRandom({top: 50, bottom: 200, left: 300, right: 320})
                    .activeOnClick()
                    .active();

    });
    })(jQuery);

Answer 1

First of all thanks to Rohaq for his answer, which does provide an alternative method however it doesn't answer my question directly, which I managed to figure out.

Spritely effectively changes the background-position property on a div. I found my issue was cause by having a sprite of a width that when divided by the number of frames did not produce an integer. When I changed the width of my sprite so that the width was 1200px and at 12 frames this meant each frame was 100px. Before I had 57.5px, which didn't work.

The jerky nature was my own doing as one of the frames had the sprite 1px to the left than the others.

Answer 2

I know that this doesn't answer your question, but I wouldn't use spritely to animate this particular sprite; the image of your sprite doesn't change, aside from its opacity, so you'd get a much smoother effect by just altering the opacity of the object using something like fadeToggle, which is part of the standard jQuery library.