Animator

by Jose Quichiz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="anim">

</div>

CSS

.anim{
  display: block;
  width: 100px;
  height: 130px;
  background-color: grey;
  background-image: url(http://doc.xenko.com/latest/en/manual/sprites/media/SpriteEntity.png);
  background-position:  0px 0;
}

JavaScript

var to = null

// Rick se la come!

$(".anim").mouseenter(function(){
	var limit = 8
  var index = 1
  var width = 102
  
  var $this = $(this)
  
	to = setInterval(function(){
  	$this.css({"background-position": "-" + (index * width) + "px 0"})
    if(index === 8){
    	index = 0
    }else{
	    index++;
    }
  }, 80);
})
.mouseleave(function(){
	clearInterval(to)
  var index = 1
  $(this).css({"background-position": "0px 0"})
})