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

で

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

    $(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

すなわち

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

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

Answer 3

Generalyいくつかの時間後にあなたの関数を呼び出すためのsetTimeout（）関数を使用してみてください。遅延コードをコールバックにパックし、そのコールバックをsetTimeoutメソッドに渡すことができます。オブジェクトで作業中に機能を維持するため。パッケージ化されたコールバックでbind(this)に電話することをお勧めします。いくつかの任意の遅延を追加し、あなたのケース

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