javascript - JS动画文字加延迟？

Question

所以我有下面的代码用于自动输入文本动画。文本位于图像前面，我希望人们首先看到完整的图片，然后开始“输入”文本。我想最好的方法是在文本开始动画之前添加 2-3 秒的延迟，但我不太确定该怎么做。

非常感谢您的帮助。谢谢!

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

添加一些任意延迟并不是最好的方法。您永远不知道图像在不同类型的网络上加载需要多长时间，有些网络非常快，有些可能非常慢。

相反，您应该在某些事件上触发代码，例如当图像加载后。您可以选择在窗口加载时运行代码，如下所示:

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