I think you could do it something like this (untested):
$.fn.walk = function( now, incr, last ) {
var $it = this;
step();
function step() {
$it.css({ backgroundPosition: now + ' 0' }).show();
now += incr;
if( now != last ) $it.fadeOut( 'slow', step );
}
};
$(function() {
$('#mjcwalk').walk( 0, -500, -2500 );
});
-Mike
> From: gogojuice
>
> I have a css sprite which I have finally managed to figure
> out how to animate. All is well, except that there is a lot
> of repetition in the code and my Software Engineering
> background is screaming at me telling me to refactor and get
> rid of the duplication in the code.
>
> <code>
> $(document).ready(function(){
> $('#mjcwalk').css( {backgroundPosition: '0 0'} )
> .fadeOut('slow', function() { $(this).css(
> {backgroundPosition: '-500 0'} ).show()
> .fadeOut('slow', function() { $(this).css(
> {backgroundPosition: '-1000 0'} ).show()
> .fadeOut('slow', function() {
> $(this).css( {backgroundPosition:
> '-1500 0'} ).show()
> .fadeOut('slow', function() {
> $(this).css( {backgroundPosition:
> '-2000 0'} ).show()
> .fadeOut('slow', function() {
> $(this).css( {backgroundPosition:
> '-2500 0'} ).show()
> });
> });
> });
> });
> });
> });
> </code>
>
> What I though I could do was to create a nice for loop and
> call the same function over and over again, but can I for the
> life of me figure out how to do it.
>
> Please could someone help me refactor this code into a
> function as have tried and tried to figure it out form myself
> and am getting no where.
>
> [EMAIL PROTECTED]
