Ajouter du retard au texte animé JS?

Question

J'ai donc le code ci-dessous pour une animation de texte automatique. Le texte est devant une image et je veux que les gens voient d'abord l'image complète, puis le texte commence à "taper". Je suppose que le meilleur moyen est d'ajouter un délai de 2-3 secondes avant que le texte commence à animer mais je ne suis pas vraiment sûr de savoir comment faire.

L'aide serait grandement appréciée. Merci!

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

Ajout d'un certain retard arbitraire est pas la meilleure façon. Vous ne savez jamais combien de temps une image prendra pour charger sur différents types de réseaux, certains sont très rapides, d'autres peuvent être très lents.

Au lieu de cela, vous devez déclencher votre code sur un événement, par ex. lorsque l'image est chargée Vous pouvez exécuter votre code sur la charge de la fenêtre en option, comme indiqué ci-dessous:

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

Essayez d'utiliser la fonction setTimeout() pour appeler votre fonction après un certain temps i.e.

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

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

Answer 3

Généralement. C'est fait que vous empaquetez le code retardé dans le rappel et que le callback que vous transmettez dans la méthode setTimeout. Pour préserver les fonctionnalités tout en travaillant dans des objets. J'ai recommandé d'appeler bind(this) sur le rappel packagé.

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

Dans votre cas

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);