Moving a background image X pixels every X milliseconds

Question

I have an image sprite of sorts with multiple frames for 1 button. I'm looking to "play" through the frames on rollover of the link/button using jQuery. Currently the image is set as the background of the button using CSS, so I'm looking to change the background position every ~30ms by ~40px along the Y axis (but I can change the direction) 10x so it ends up moving ~400px.

I've tried using the animate in jQuery with the a modified background position plugin, similar to that shown here but it more or less moves the background image up pixel by pixel, not set pixel jumps.

Is there a better option?

Answer 1

If all you want to do is move a background image around, you can use setInterval. This is the basic idea (I haven't tested this so it may not be perfect/have errors)

function moveImage() {
var x = parseInt( $(selector).css("backgroundPositionx") );
var y = parseInt( $(selector).css("backgroundPositiony") );
$(selector).css("backgroundPositionx",x+change_in_x);
$(selector).css("backgroundPositiony",y+change_in_y);
}

document.setInterval(moveImage,numberofmilliseconds);

EDIT: corrected errors