Verzögerung zu JS animiertem Text hinzufügen?

Question

Also habe ich den Code unten für eine automatische Textanimation. Der Text ist vor einem Bild und ich möchte, dass die Leute zuerst das ganze Bild sehen und dann beginnt der Text zu "tippen". Ich denke, der beste Weg ist es, eine Verzögerung von 2-3 Sekunden hinzuzufügen, bevor der Text zu animieren beginnt, aber ich bin mir nicht sicher, wie das geht.

Hilfe würde sehr geschätzt werden. Vielen Dank!

function cursorAnimation() { 
    $('#cursor').animate({ 
    opacity: 0 
    }, 'fast', 'swing').animate({ 
    opacity: 1 
    }, 'fast', 'swing'); 
} 
$(document).ready(function() { 
    setInterval('cursorAnimation()', 1000); 
}); 

var text = 'TEXT GOES HERE'; 

$.each(text.split(''), function(i, letter) { 
    setTimeout(function() { 
    $('#container').html($('#container').html() + letter); 
    }, 110 * i); 
}); 

Answer 1

eine willkürliche Verzögerung Hinzufügen ist nicht der beste Weg. Sie wissen nie, wie viel Zeit ein Bild braucht, um auf verschiedene Arten von Netzwerken geladen zu werden, manche sind sehr schnell, andere können sehr langsam sein.

Stattdessen sollten Sie Ihren Code bei einem Ereignis z. wenn das Bild geladen wurde. Sie können den Code auf Fenster Last als Option ausgeführt, wie unten dargestellt:

function cursorAnimation() { 
    $('#cursor').animate({ 
    opacity: 0 
    }, 'fast', 'swing').animate({ 
    opacity: 1 
    }, 'fast', 'swing'); 
} 
$(document).ready(function() { 
    setInterval('cursorAnimation()', 1000); 

    $(window).on("load", function(){ 
    // do here tasks that you want to run after all page assets e.g. images have been loaded 
    showText(); 
    });//window load() 
}); 

function showText() { 
    var text = 'TEXT GOES HERE'; 
    $.each(text.split(''), function(i, letter) { 
    setTimeout(function() { 
     $('#container').html($('#container').html() + letter); 
    }, 110 * i); 
    }); 
} 

Answer 2

Versuchen setTimeout() Funktion mit Ihrer Funktion nach einiger Zeit heißt

$(document).ready(function() { 
    setTimeout(yourfunction(), 1000); //changes milliseconds as per your need. 
}) 

https://www.w3schools.com/jsref/met_win_settimeout.asp

Answer 3

Generaly zu nennen. Es ist getan, dass Sie verzögerten Code in den Callback packen und diesen Callback an die Methode setTimeout übergeben. Zum Bewahren der Funktionalität beim Arbeiten in Objekten. Ich empfahl, bind(this) auf verpackten Rückruf zurückzurufen.

setTimeout(function() { 
    console.log("Delayed message"); 
}.bind(this), 3000); 

In Ihrem Fall

function cursorAnimation() { 
    $('#cursor').animate({ 
    opacity: 0 
    }, 'fast', 'swing').animate({ 
    opacity: 1 
    }, 'fast', 'swing'); 
} 
$(document).ready(function() { 
    setInterval('cursorAnimation()', 1000); 
}); 

var text = 'TEXT GOES HERE'; 

setTimeout(function() { 
    // delayed code 
    $.each(text.split(''), function(i, letter) { 
    setTimeout(function() { 
     $('#container').html($('#container').html() + letter); 
    }, 110 * i); 
    }); 
    // end of delayed code 
}.bind(this), 3000);