Just to explain that code a bit... You can't use a simple for loop, because
your repeated steps have to be run asynchronously, when the fadeOut callback
function is called.
So, instead of using a separate callback function for each step, this code
uses a common callback for all the steps, and makes the callback know how to
move along to the next step and trigger the next fadeOut.
You can easily extend this technique for other similar purposes. For
example, if you have an array of positions that aren't in a linear sequence,
you can set an array index to 0 before calling the first step, and increment
the array index in each step.
The code to do the same thing using that approach could look like this:
$.fn.walk = function( positions ) {
var $it = this, i = 0;
step();
function step() {
$it.css({ backgroundPosition: positions[i++] + ' 0' }).show();
if( i < positions.length ) $it.fadeOut( 'slow', step );
}
};
$(function() {
$('#mjcwalk').walk([ 0, -500, -100, -1500, -2000, -2500 ]);
});
-Mike
> From: Michael Geary
>
> 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]
>
