Delay Fadein und Fadeout

Question

Ich versuche, eine Liste von Objekten zu erstellen und iterieren über Einblenden und Ausblenden. Bei jedem Laden der Seite wird jedoch zum letzten Text gesprungen. Ich nehme an, dass es etwas asynchron macht und gerade durch die Liste blitzte, weil die Konsole alle Werte ausgibt. Jede Lösung, die ich gefunden habe, endet mit dem gleichen Ergebnis.

Hier ist, was ich bisher:

$(document).ready(function(){ 
 
    var resumation = [ 
 
    {value: "First Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Second Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Last Text", type: "text", top: 340, duration: 5} 
 
    ]; 
 
    $("#ab-text").fadeOut(0); 
 
    $.each(resumation, function(index, obj){ 
 
    console.log(obj.value); 
 
    $("#ab-text").empty().append(obj.value).fadeIn(5000, function(){ 
 
     $("#ab-text").delay(3000).fadeOut(5000, function(){ 
 
     return; 
 
     }); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ab-text"></div>

Answer 1

Der isse mit Ihrem Code ist, dass $.each nicht umsonst warten. Es durchläuft alle Elemente auf einmal, wie Sie in der Konsole mit Ihrer .log-Anweisung sehen sollten. Das bedeutet, dass ab-text fast sofort auf alle verschiedenen Werte gesetzt wird und beim letzten Punkt stoppt.

Sie müssen irgendwie die Animation des nächsten Elements aufrufen nach die Animation ist abgeschlossen. Sie dachten also das Richtige, aber vergaßen die each.

So etwas funktioniert besser, indem die Funktion next rekursiv aufgerufen wird, nachdem jede Animation abgeschlossen ist.

$(document).ready(function(){ 
 
    var resumation = [ 
 
    {value: "First Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Second Text", type: "text", top: 340, duration: 5}, 
 
    {value: "Last Text", type: "text", top: 340, duration: 5} 
 
    ]; 
 

 
    next(0); 
 

 
    function next (i) { 
 
    var obj = resumation[i % resumation.length]; 
 
    $("#ab-text").empty().append(obj.value).fadeIn(5000, function() { 
 
     $("#ab-text").delay(3000).fadeOut(5000, function(){ 
 
     next(i + 1); 
 
     }); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="ab-text"></div>