jQueyのjquery.cookie.jsを利用して、初回アクセス時のスプラッシュ画面アニメーションを実装しようとしています。
以下の挙動を目的としています。
■初回アクセス時
①にbody要素にCSSを当ててスクロール禁止
②該当クラス(スプラッシュ画面ブロック)にdisplay blockで表示させておく
③アニメーション要素にfadeInを使用し表示
④fadeInが終了したらfadeOutで非表示になる
■二回目以降
①メインコンテンツを表示
初回アクセス時①〜③まではなんとか実装ができたのですが、
④fadeInが終了したらfadeOutで非表示になる
この部分が思った通りに動かず右往左往しています。
fadeOutを入れる箇所がfadeInの中に入れないと終了後に挙動しない?ようなのですが、
いまいちピンときておりません。
何卒ご教授いただけると幸いです。
どうぞよろしくお願いします。
HTML
<div class="splashScreen_container"> <div class="splashScreen_animatedFirst"> <img class="splashScreen_symbol" src="ロゴマーク画像" alt=""> </div> <div class="splashScreen_animatedSecond"> <p class="splashScreen_text">表示テキスト</p> </div> </div> </div>
JS
$(function () { if ($.cookie("access") == undefined) { $.cookie("access", "onece"); $("body").css("overflow", "hidden"); $(".splashScreen").css("display", "block"); $(".splashScreen_animatedFirst").fadeIn(1500); $(".splashScreen_animatedSecond").fadeIn(3500); } else { コンテンツ表示 } });
回答1件
あなたの回答
tips
プレビュー