所以我有下面的代码用于自动输入文本动画。文本位于图像前面,我希望人们首先看到完整的图片,然后开始“输入”文本。我想最好的方法是在文本开始动画之前添加 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);
});
最佳答案
添加一些任意延迟并不是最好的方法。您永远不知道图像在不同类型的网络上加载需要多长时间,有些网络非常快,有些可能非常慢。
相反,您应该在某些事件上触发代码,例如当图像加载后。您可以选择在窗口加载时运行代码,如下所示:
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);
});
}
关于javascript - JS动画文字加延迟?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44127763/