为 JS 动画文本添加延迟？

Question

所以我有下面的代码用于自动输入文本动画。文字在图片前面，我希望人们先看到完整图片，然后文字开始 "type"。我想最好的方法是在文本开始动画之前添加 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

尝试使用 setTimeout() 函数在一段时间后调用您的函数，即

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

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

Answer 2

一般。完成后，您将延迟代码打包到回调中，并将该回调传递给 setTimeout 方法。用于在对象中工作时保留功能。我建议在打包回调时调用 bind(this)。

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

你的情况

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

Answer 3

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

相反，您应该在某些事件上触发您的代码，例如图片加载完成后。您可以运行您的代码 window 作为选项加载，如下所示：

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

为 JS 动画文本添加延迟？

Add delay to JS animated text?

javascript

jquery

animation

typography