JavaScript アイフレの遅延効果

見本のブログ　http://ameblo.jp/ex007/

スキンの左の青いアイフレが遅れて表示されます

前の記事で設定したアイフレ の　aifure02　を遅れて表示させて見ます

最初に・・・ＣＳＳで表示しないようにしておきます

ＣＳＳの編集で最後に・・・

#aifure02{
display:none;
}

フリープラグインで遅延効果をつけます

jQueryの最新バージョンでしたらdelay()という遅延効果が簡単に出来るようなんですが・・

setTimeoutを使います

フリープラグインに・・・（フリープラグインの最初の方に書いてください）

<script type="text/javascript">
<!--
$(function(){
setTimeout(function() { $("#aifure02").fadeIn(5000);}, 3000);
});
//-->
</script>

最初の5000は5秒かけてフェードイン（だんだんと表示）させる

後の3000は　ページを開いてから3秒後に実行する

（この場合はページを開いて3秒後に5秒間かけてゆっくり表示します）

0.5秒でしたら500 で　10秒でしたら　10000 になります
時間は自由に設定下さい

あまり時間をかけて表示させるとスクロールされちゃってみてもらえない可能性もありますからご注意下さい

ページを開いてから・・とは

フリープラグインに入っているブログパーツなども全部読み終わってからになりますので・・

重いブログパーツなどが入っている場合はより時間がかかります

※アイフレの背景を半透明にしているＣＳＳが効かなくなる場合があります