Infinite loop

We can specify the Infinite loop, by assigning -1 to the "numberOfLoops" attribute of the options parameter. This is how to implement jquery loop animation


      $(document).ready(function() {
        sa1 = {};
        $('#stop1').click(function() {
            $('#sprite1').spriteAnimation();
        });
        $('#run1').click(function() {
            sa1 = $('#sprite1').spriteAnimation({
                numberOfLoops: -1,
                direction: 'ltr',
                startFrame: 0,
                endFrame: 36,
                interval: 20,
                onStop: function() { alert("stopped!"); }
            });
        });
    });

5 loops

We can specify the number of loops as 5, by assigning 5 to the "numberOfLoops" attribute of the options parameter.

         $(document).ready(function() {
                $('#run2').click(function() {
                    $('#sprite2').spriteAnimation({
                    numberOfLoops: 5,
                    direction: 'ltr',
                    startFrame: 0,
                    endFrame: 36,
                    interval: 20,
                    onStop: function() { alert("stopped!"); }
                });
            });
        });

Subset of the the image frames

We want to create an animation by frames only from 0 to 18 (180 degrees) and we want it to be executed once.

 $(document).ready(function() {
        $('#run3').click(function() {
            $('#sprite3').spriteAnimation({
                numberOfLoops: 1,
                direction: 'ltr',
                startFrame: 0,
                endFrame: 18,
                interval: 20
            });
        });
    });

Apply sprite to existing elements

You can apply the animation anytime to the exsisted element by specifying the "imageSrc" attribute of the option parameter.

 
         <div id="sprite4" style="height:85px;width:85px;border:dashed 1px gray"></div>
        
        <script type="text/javascript" >
            $(document).ready(function() {
                
                $('#run4').click(function() {
                    $('#sprite4').spriteAnimation({
                        imageSrc: 'http://fs.hyzonia.com/hyz.islands/PopNDrop/common/css/arrows.png',
                        numberOfLoops: -1,
                        direction: 'ltr',
                        startFrame: 0,
                        endFrame: 36,
                        interval: 20
                    });
                });

                moveDiv();
                
             });
         </script>

Apply different sprites on specific times

You can apply different animations anytime by calling the spriteAnimation again.
In this example the arrow should change its direction on each edge, to do that we call the sprite animation when the arrow reaches the right edge to create moving to left feeling, when the arrow reaches the left edge we do the opposite by assigning 'rtl' to the direction and swaping the startFrame and endFrame values. Note we also changed the interval to make the arrow movement faster.

 <div id="sprite5" style="height:85px;width:85px;border:dashed 1px gray; background-image:url('http://fs.hyzonia.com/hyz.islands/PopNDrop/common/css/arrows.png')"></div>
<script type="text/javascript" >
    $(document).ready(function() {
        moveDiv2();
    });

    function spriteToLeft() {
        $('#sprite5').spriteAnimation({
            
            numberOfLoops: 1,
            direction: 'ltr',
            startFrame: 0,
            endFrame: 18,
            interval: 10
        });
    }

    function spriteToRight() {
        $('#sprite5').spriteAnimation({
            numberOfLoops: 1,
            direction: 'rtl',
            startFrame: 18,
            endFrame: 0,
            interval: 10
        });
    }
    function moveDiv2() {
        moveDir2 = 1;
        distance2 = 300;
        i2 = 0;
        function move2() {
            i2 = i2 + moveDir2;
            
            $('#sprite5').css('margin-left', i2 + moveDir2);
            
            if (i2 == distance2) {
                spriteToLeft();
                moveDir2 = -1;
            }
            if (i2 == 0) {
                spriteToRight();
                moveDir2 = 1;
            }
        }
        function go2() {
            move2();
            setTimeout(go2, 5);
        }
        go2();
    }
    
</script>