ページ読み込み時、時間差で要素を表示させるスクリプト記述

ページ読み込み時、という限定ではあるが、ファーストビューが読み込まれて●秒後に表示させたい、とかいう時のスクリプト。

基本形。「ページ読み込みがあったら、div id=”block01″ の要素を3秒後にフェードインさせる」。いろいろ試してとりあえずコレで。
setTimeoutが時間を管理する命令で、最後の3000が秒数となる。最初にopacityの値を0で表示させないでおくのがポイントで、3秒後にopacityを1にして表示させる仕組み、らしい。

$(function(){
$("#block01").css({opacity:'0'});
setTimeout(function(){
$("#block01").stop().animate({opacity:'1'},1000);
},3000);
});

で、これに「ページ読み込み後、3秒目でにフェードインして、10秒目でフェードアウトする」となると以下の通りとなる。
setTimeoutでopacityの加減命令を並べて書いて秒数を変えて時間差をつけているだけなのだが、間違えてはいけないのは秒数は読み込みからの時間であり、最初の命令からの時間ではない点。

$(function(){
    $("#block01").css({opacity:'0'});
    setTimeout(function(){
        $("#block01").stop().animate({opacity:'1'},1000);
    },3000);
    setTimeout(function(){
        $("#block01").stop().animate({opacity:'0'},1000);
    },10000);
});

さらに、これに「ページ読み込み後、#block01をフェードイン→フェードアウトした後、#block02をフェードインさせる」となると少し複雑になると以下の感じ。

$(function(){
    $("#block01").css({opacity:'0'});
    $("#block02").css({opacity:'0'});
    $("#block01").hide();
    $("#block02").hide();

    setTimeout(function(){
        $("#block01").show();
        $("#block01").stop().animate({opacity:'1'},1000);
    },1000);

    setTimeout(function(){
        $("#block01").stop().animate({opacity:'0'},1000);
        $("#block01").hide();
    },5000);
 
    setTimeout(function(){
 $("#block02").show();
        $("#block02).stop().animate({opacity:'1'},1000);
    },6000);
});

宣言にhideを増やす。これはdisplay:block、noneと同等の動きらしい。この処理を加えた理由だが、opacityだと画面に見えないが要素が残っており、リンクなんか張った要素だと空白地なのにリンクが押せちゃうので要素自体を消す必要があるため。つまり宣言では、透明にしたうえで非表示という2段階の処理を加えている。
そしてsetTimeoutが来たら、showで要素を表示させ、opacityを1にして透明から非透明にして要素を登場させる、という処理を同タイミングで行わせている。

参考：
・「～秒後に、指定した要素をフェードアウトさせる」
・「jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法」

コメントを残す