jquery animations sequence callback

[mcmurphy]

Hi,
habe folgendes Problem:
ich will über eine Liste eine Animation ausführen:
die einzelnen li sollen nacheinander einfaden und nach dem Fade noch gestylt werden.
Das Styling kann sich je nach Listen element unterscheiden.
Das sequenzielle Einfaden habe ich hinbekommen:

<div id="right_box">

<ul>
<li>punkt1</li>
<li>punkt2</li>
<li>punkt3</li>
<li id="separator"><!-- wäre ne Trennlinie mit background-image per css -></li>
<li id="last_element>noch en punkt...</li>
</ul>
</div> 

function animate_right_box_lis(){
   var lis =  $('#right_box ul li');
   var i = 0;
   (function() {  
       $(lis[i++] || []).fadeIn('slow',arguments.callee);  
   })(); 
} 

Hier wird ein Array mit den Elementen in der anonymen Funktion aufgerufen.
Als Callback von fadeIn wird die anonyme Funktion mit arguments.callee wieder mit dem nächsten Element aufgerufen (soweit habe ich den Code zumindest verstanden).
(quelle: Quick Tip: Easy Sequential Animations in jQuery | Nettuts+)

Ich will aber nicht einfach nur einfaden sondern nach dem Fade noch ein weiter Aktion auf dem Element ausführen.
Den Callback von fadeIn kann ich ja nicht verwenden da damit ja schon der nächste Step der anonymen Funktion ausgeführt wird.

Also habe ich versucht eine eigene Funktion zu bauen, welche wie FadeIn einen Callback ausführt - und kläglich gescheitert.
Hier mal ein Versuch:

function animate_right_box_lis(){
  var lis =  $('#right_box ul li');
  var i = 0;
  (function() {  
     $(lis[i++] || []).animate_single_li(arguments.callee);  
  })(); 

}
$.fn.animate_single_li = function() { 
  $(this).fadeIn('slow',function(){
    $(this).addClass('white_check'); 
  });          
} 

damit würde aber nur das erste Element animiert.

Ich vermute mal schwer das meiner Funktion ein Callback fehlt...

Also gegoogelt und diese Konstruct gefunden:
function meineFunktion(parameter1, parameter2, callback)
{
alert('Diese Funktion macht nichts außer '+ (parameter1+parameter2*3) + ' ausgeben';
if(parameter1 === 2) {
/* ...unter gewissen Bedingungen (hier parameter1 === 2) aufgerufen wird... */
if(callback && typeof(callback) === 'function') {
callback();
}
}
}

aber schaffe es einfach nicht meine Funktion so zu bauen, dass:
- die Listenelemente einzeln einfaden
- und nach jedem Fade noch eine weitere Aktion ausgeführt wird, die sich je nach Art des Listenelements unterscheiden kann.

Wie müsste ich denn in:

$.fn.animate_single_li = function() { 
  $(this).fadeIn('slow',function(){
    $(this).addClass('white_check'); 
  });          
} 

das hier:

 if(callback && typeof(callback) === 'function') {
     callback();
 } 

einbauen?

Stehe komplett auf dem Schlauch - kann mich einer anheben?

P.S.:
Ein anderer Ansatz mit queue wäre:

$('#right_box ul li').each(function(i) {
    var lis = $(this);
    $(document).queue('myQueue', function(n) {
      lis.fadeIn('slow', n);
    });
});
$(document).dequeue('myQueue');); 

aber das Problem wäre das gleiche - brauch statt dem FadeIn eine eigene Funktion mit callback, damit ich die Sequence entweder mit:

(function() {  
     $(lis[i++] || []).animate_single_li(arguments.callee);  
  })(); 

oder mit:

$(document).queue('myQueue', function(n) {
      lis.animate_single_li('slow', n);
}); 

aufrufen kann