unendlich loop jQuery Verkettung

Question

Ich frage mich, ob es möglich ist, ein ähnliches Format zu behalten und eine Endlosschleife für einfache jQuery-Kettenanimationen wie die unten zu setzen.

$('.learnwhat').delay(500).fadeIn(1500); 
    $('.learnwhat').delay(2000).fadeOut(500); 
    $('.seeresults').delay(5000).fadeIn(1500); 
    $('.seeresults').delay(500).fadeOut(500); 
    $('.personalsolution').delay(9000).fadeIn(1500); 
    $('.personalsolution').delay(500).fadeOut(500); 

Answer 1

Die meisten jQuery-Animationen akzeptieren einen callback als letzten Parameter. Was immer Sie dort hinstellen, wird nach Abschluss der Animation aufgerufen. Alles, was Sie tun müssen, ist, Ihre Animationen zu benennen, indem Sie sie in Variablen einfügen und sie über den Animationsrückruf aufrufen. Generisches Beispiel:

var looping = function() { 
    $('.learnwhat').delay(500).fadeIn(1500, looping()); 
} 

Das obige sollte funktionieren. Wenn dies nicht der Fall ist, ist der äußere Bereich nicht innerhalb des Funktionsumfangs verfügbar, aber Sie können immer window.looping und (window.looping()) verwenden. Um die window Objekt nicht zu verschmutzen, sollten Sie ein einzelnes Objekt erstellen alle Funktionen enthält:

var window.myLoops = { 
    loop_1:function() { 
     $('.learnwhat').delay(500).fadeIn(1500, window.myLoops.loop_2()); 
    }, 
    loop_2:function() { 
     $('.learnwhat').delay(500).fadeIn(500, window.myLoops.loop_1()); 
    } 
} 

Natürlich müssen Sie sie beginnen, durch den Aufruf einmal: window.myLoops.loop_1();

Wichtig: Don erwarte nicht, dass zwei gleich lange Loops synchron bleiben. Wenn Sie zwei Animationen synchronisieren möchten, müssen Sie beide entweder in derselben Funktion platzieren oder ihre Funktionen in einer Schleife verketten, indem Sie jede Funktion vom Callback der anderen Funktion aufrufen.

Answer 2

Sie können die callback von jQuery Animation verwenden und eine generic Methode wie unten verwenden, um dies zu erreichen, um den Code zu reduzieren.

function animateFade(elm, timers, cb) { 
    var index = 0; 
    var animateFn = function() { 
     if(timers.length > index) { 
      var timer = timers[index++]; 
      elm.delay(timer[0]).fadeIn(timer[1], animateFn); 
     } else if(cb && typeof cb === 'function') { 
      cb(); 
     } 
    }; 

    animateFn(); 
    } 

    // Change the timer values here 
    animateFade($('.learnwhat'), [[500, 1500], [2000, 500]); 
    animateFade($('.seeresults'), [[5000, 1500], [500, 500]); 
    animateFade($('.personalsolution'), [[9000, 1500], [500, 500]); 

    // or even if you want to chain them one after another 
    animateFade($('.learnwhat'), [[500, 1500], [2000, 500], function() { 
    animateFade($('.seeresults'), [[5000, 1500], [500, 500], function() { 
     animateFade($('.personalsolution'), [[9000, 1500], [500, 500]); 
    }); 
    });