Sprite animation with jQuery

by Susan Delgado

HTML

<div id="container">
    	<h1>Sprite animation</h1>

    <p>This is my test Sprite Animaion Done with jQuery</p>
    <div class="sprite">
        <h2>HOVER THIS SPRITE</h2>
    </div>
</div>

CSS

#container{
	width:960px;
	height: 300px;
	margin: 0 auto;
}
.sprite{
	width:200px;
	height: 205px;
	background-image:url(https://as2.ftcdn.net/v2/jpg/18/83/61/09/1000_F_1883610932_if1mD1UlYaYsBwzlkliQmukfasKlTYh4.jpg);
	background-position:0px 0px;
	background-repeat: no-repeat;
	display:block;
	float: left;
}
img{
	width:600px;

}

JavaScript

$(function () {
    var interval = "";
    var out = "";
    //set up the starting background positions
    var xpos = 0;
    var ypos = 0;
    //on hover
    $('.sprite').hover(function () {
        //in interval variable is blank string
        if (interval == "") {
            //set interval to animate the sprite
            interval = window.setInterval(anim, 30);
        }
    }, function () {
        //otherwise clear the interval
        window.clearInterval(interval);
        //set interval variable to blank string
        interval = "";
        //and reverse the animation to play backwards
        if (out == "") {
            out = window.setInterval(resetanim, 30);
        }
    });

    function anim() {

        var framePosX = $(".sprite").css('background-position-x').split(' ');
        var framePosY = $(".sprite").css('background-position-y').split(' ');
        var framex = parseInt(framePosX[0].split('px'));
        var framey = parseInt(framePosY[0].split('px'));
        console.log(framex, framey);



        if (framey <= (-1228) && framex == (-240)) {
            console.log('end');
            console.log('AT: ', framex, framey);
            xpos = 0;
            ypos = 0;
            $('.sprite').css({
                'backgroundPosition': xpos + 'px ' + ypos + 'px'
            });
        } else if (framex > (-960)) {
            // console.log('good');
            /*var*/
            xpos = framex - 200;
            $('.sprite').css({
                'backgroundPosition': xpos + 'px ' + ypos + 'px'
            });
            // console.log('move left');
        } else if (framex == (-960) && framey > (-1228)) {
            xpos = 0;
            /*var*/
            ypos = framey - 200;
            $('.sprite').css({
                'backgroundPosition': xpos + 'px ' + ypos + 'px'
            });
            console.log('move down to ', framey);
        }
        //figure out logic...