どうもこんにちは。
連日失礼します。WEBおじさんです。
今回は、時間差でjQueryの処理を実行させる方法をご案内します。
「え？なんで時間差で処理を実行するの？すぐ実行させた方がいいじゃん。」と思う方々が多いと思います。
私もそう思っていました。
でも、時間差で実行させた方が良い処理っていうのもあります。
例えば、ページを開いた時に表示されるバナーよりも、開いてから数秒後に表示されるバナーの方が目に付くからその方が良いとか、文字を0.3秒間隔で表示させたいとか、うまく使うとオシャレな表示ができます。
そんなわけで、時間差処理の方法です。
今回は劇的にシンプルに「数秒後に表示される」というものをデモにしたいと思います。
シンプルすぎて、説明もないくらいなんですけどねｗ
ということで、こちらがデモです。
【HTML】
<div id=”boxbox”>
<p>■5秒後に表示される</p>
<p id=”smallwindow” class=”window”>
5秒経ちましたね。
</p>
</div>
【CSS】
.window {
display:none;
padding:15px;
border:1px solid #ccc;
background-color:#fdd;
max-width:400px;
}
【JS】
$(function(){
setTimeout(function(){
$(‘#smallwindow’).fadeIn();
},5000);
});
今回、とてもソースが短いですｗ
全てのソースが短いですｗｗｗ
挙動としては、でもページを開いた5秒後に指定した部分が表示される、というものです。
setTimeoutという関数が時間経過後の処理でよく使われるんじゃないでしょうかね。
第一引数のfunctionで実行させたい処理を書き、第二引数で時間をセットします。
この時間はマイクロ秒なのでご注意ください。
ちなみに、マイクロ秒というのは「1秒が1000マイクロ秒」という計算なので、ここでは「5000」とセットしてます。
JSを解説すると、「smallwindow」というid名を持った要素がページを読み込んだ5000マイクロ秒（5秒）後にフェードイン表示される、というものです。
・・・
えー、終わりですｗ
実に簡単ですねｗ
もう、すぐ使えますねｗ
覚えることも大してないのでコピペでいいですねｗ
もちろん、fadeInをfadeOutとすれば表示を消す、という処理になります。
この文字を1文字ずつの配列にしてループさせ、表示させる秒数をずらしたりすればパラパラ表示的になっていい感じのオシャレ間が出たりしますね。
まぁ、そんな感じですｗ
要は使い方とアイディア次第ってことですねｗ
やっぱり重要なのは「どういうことができるのか」という知識を持っておくことですね。
ということで、本日は以上です。
またお会いしましょうｗ