Wie kann ich Text ändern, NACHDEM das div endlich eingeblendet wird (JS, jQuery)?

Question

Ich habe eine JavaScript-Funktion, die einen Text in ein div in HTML-Dokument schreibt (mit inneHTMLr). Diese Funktion hat auch jQuery-Funktion, die langsam macht diese Div unsichtbar - $("#descr").fadeOut(); und dann sichtbar - vor dem Schreiben von Text in es.

Ich kann diese Funktion mehrmals aufrufen, um verschiedene Texte zu schreiben. Aber da die Effekte "Ausblenden" und "Einblenden" langsam sind, sehe ich, dass sich der Text im Div ändert, bevor er ausblendet und wieder eingeblendet wird.

Wie kann ich Text ändern, der geändert wird, nachdem das div schließlich eingeblendet wird? Ich wäre dankbar für den einfachsten Weg.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    var name1 = "name"; 
 
    var name2 = "3"; 
 
    var name3 = "Text that I want to write"; 
 

 
    function start() { 
 

 
    $("#here").fadeOut(); 
 
    $("#here").fadeIn(); 
 
    document.getElementById('here').innerHTML = eval(name1 + name2); 
 
    } 
 
\t function start2() { 
 

 
    $("#here").fadeOut(600); 
 
    $("#here").fadeIn(600); 
 
    document.getElementById('here').innerHTML = "New text"; 
 
    } 
 
</script> 
 

 
<div id="here" style="background-color: green; color: white; display: none;"></div> 
 

 
<button onclick="start()"> 
 
    Text-1 
 
</button> 
 

 
<button onclick="start2()"> 
 
    Text-2 
 
</button>

P. S. Ich habe hier zwei Funktionen benutzt, aber in meinem Projekt habe ich nur eine, aber kompliziertere Funktion.

Answer 1

Sie die fadeIn geben können/fadeOut ein Callback funktioniert als solcher:

$("#ele").fadeIn(200, function() { 
    //code after 200ms 
}); 

Schauen Sie sich jQuery documentation für weitere Informationen an!

Answer 2

Setzen Sie den Text ändern und fadeIn in einer Callback-Funktion der fadeOut Anweisung , so dass sie erst nach dem fadeOut abgeschlossen hat laufen:

var name1 = "name"; 
 
    var name2 = "3"; 
 
    var name3 = "Text that I want to write"; 
 

 
    function start() { 
 

 
    $("#here").fadeOut(500, function(){ 
 
     $('#here').html(name1 + name2); 
 
     $("#here").fadeIn(); 
 
    }); 
 
    } 
 
\t function start2() { 
 

 
    $("#here").fadeOut(600, function(){ 
 
     $('#here').html("New text"); 
 
     $("#here").fadeIn(600); 
 
    }); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="here" style="background-color: green; color: white; display: none;"></div> 
 

 
<button onclick="start()"> 
 
    Start 
 
</button> 
 

 
<button onclick="start2()"> 
 
    Start 
 
</button>