##########################
In HEAD
##########################
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="spriteControl.js"></script>
<style>
.sprite {
border:1px solid red;
display: block;
background: url(http://mooseloose.com/moose.png) 0 0 no-repeat;
width: 100px;
height: 100px;
float:left;
}
</style>
##########################
Paste where you want it
##########################
<a class="sprite" href="#"></a>
##########################
In FOOTER
##########################
<script>
$(".sprite").spriteControl({
allsteps: 16,
step:100
});
</script>
##########################
spriteControl.js
##########################
$.widget("nsp.spriteControl", {
options: {
allsteps: 10,
step: 110,
loop: false,
reverse: true,
horizontalImg:true
},
_setOption: function (key, value) {
this.options[key] = value;
this._update();
},
_create: function () {
this._update();
},
_update: function () {
var plgn = this;
var element = plgn.element;
var timer = 0;
var x = y = attr = 0;
var allsteps = plgn.options.allsteps
var step = plgn.options.step;
var loop = plgn.options.loop;
var reverse = plgn.options.reverse;
var ceil = allsteps * (step) - 2 * step;
var horizontalImg = plgn.options.horizontalImg;
element.on('mouseover', function () {
clearInterval(timer);
timer = setInterval(function () {
plgn._setBgPos(x, y);
if (attr < -ceil) {
if (loop) {
attr = 0;
} else {
clearInterval(timer);
}
} else {
attr -= step;
}
if (horizontalImg) {
x = attr;
} else {
y = attr;
}
}, 30);
});
element.on('mouseout', function () {
clearInterval(timer);
if (reverse) {
timer = setInterval(function () {
plgn._setBgPos(x, y);
if (attr > -step) {
clearInterval(timer);
} else {
attr += step;
}
if (horizontalImg) {
x = attr;
} else {
y = attr;
}
}, 30);
}
});
},
_setBgPos: function (x, y) {
var plgn = this;
var element = plgn.element;
var horizontalImg = plgn.options.horizontalImg;
if (horizontalImg) {
element.css('background-position', x + 'px' + ' 0');
} else {
element.css('background-position', '0 ' + y + 'px');
}
}
});