jquery animations sequence callback

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jquery animations sequence callback

    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:
    PHP Code:
    <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> 
    PHP Code:
    function animate_right_box_lis(){
       var 
    lis =  $('#right_box ul li');
       var 
    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:
    PHP Code:
    function animate_right_box_lis(){
      var 
    lis =  $('#right_box ul li');
      var 
    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:
    PHP Code:
    $.fn.animate_single_li = function() { 
      $(
    this).fadeIn('slow',function(){
        $(
    this).addClass('white_check'); 
      });          

    das hier:
    PHP Code:
     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:
    PHP Code:
    $('#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:
    PHP Code:
    (function() {  
         $(
    lis[i++] || []).animate_single_li(arguments.callee);  
      })(); 
    oder mit:
    PHP Code:
    $(document).queue('myQueue', function(n) {
          
    lis.animate_single_li('slow'n);
    }); 
    aufrufen kann
    Last edited by mcmurphy; 22-06-2012, 11:28.
    "I don't want to belong to any club that would accept me as a member."

    Groucho Marx
Working...
X