Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Forked from iammerrick/gist:1055195
Created June 29, 2011 23:08
Show Gist options
  • Save ryanflorence/1055239 to your computer and use it in GitHub Desktop.
Save ryanflorence/1055239 to your computer and use it in GitHub Desktop.
$.fn.sprite = function(options){
var defaults = {
frames: 10,
inverse: false,
size: 20,
duration: 400
};
options = $.extend({}, defaults, options);
var $el = $(this)
, currentFrame = 1
, fps = options.duration / frames
, positions = ($(this).css('background-position').split(' ') || ' ')
, top = positions[1]
, left = positions[0]
, backgroundPosition;
function animate(){
if(options.inverse){
top = parseInt(top) - options.size;
} else{
top = parseInt(top) + options.size;
}
$el.css('background-position', left+' '+top+'px');
currentFrame++;
if(currentFrame < options.frames){
setTimeout(animate, fps);
}
}
setTimeout(animate , fps);
};
@iammerrick
Copy link

$.fn.sprite = function(options){

var defaults = {
frames: 10,
inverse: false,
size: 20,
duration: 400
}
, options = $.extend({}, defaults, options)
, $el = $(this)
, currentFrame = 1
, fps = options.duration / frames
, positions = ($(this).css('background-position').split(' ') || ' ')
, top = positions[1]
, left = positions[0]
, backgroundPosition;

function animate(){

if(options.inverse){
  top = parseInt(top) - options.size;
} else{
  top = parseInt(top) + options.size;
}

$el.css('background-position', left+' '+top+'px');

currentFrame++;

if(currentFrame < options.frames){
  setTimeout(animate, fps);
}

}

setTimeout(animate , fps);

};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment