[jQuery] Re: Help refactoring code for css sprite animation

[gogojuice]

Thanks Michael

Your code worked right off the copy and paste.   I knew there was a
recursive procedure in there somewhere, but I'm just getting up to speed
with Javascript after years of ignoring it due to the pain and suffering
involved in writing cross platform stuff.  Jquery has made me want to learn
again.

Thanks Again 
-- 
View this message in context: 
http://www.nabble.com/Help-refactoring-code-for-css-sprite-animation-tp19597457s27240p19604365.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[jQuery] Re: Help refactoring code for css sprite animation

[Michael Geary]

That's great, I'm glad it worked!

Just a minor point of terminology: There's actually no recursion in that
code, although it does have a recursive feel to it. The callback functions
are called at a later time after the original function has returned.
Recursion would be when you have a function calling itself *before* it
returns.

-Mike

 From: gogojuice
 
 Thanks Michael
 
 Your code worked right off the copy and paste.   I knew there was a
 recursive procedure in there somewhere, but I'm just getting 
 up to speed with Javascript after years of ignoring it due to 
 the pain and suffering involved in writing cross platform 
 stuff.  Jquery has made me want to learn again.
 
 Thanks Again

[jQuery] Re: Help refactoring code for css sprite animation

[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]

[jQuery] Re: Help refactoring code for css sprite animation

[Michael Geary]

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]