jQueryを使用してサイトアクセス時にページ内容をフェードインさせる方法と、
リンクをクリックした時にフェードアウトしてからページ遷移する方法をメモします。
フェードイン、フェードアウトするのに下記のメソッドを使用しています。
fadeIn([speed], [callback])
指定した要素をフェードインして表示します。
fadeOut([speed], [callback])
指定した要素をフェードアウトして非表示にします。
※[callback]は処理終了時に実行する内容を記述します。
■ フェードイン、フェードアウトする方法
「wrapper」の内容がフェードインして表示されます。
また、リンクをクリックするとフェードアウトしてページ遷移します。
【JS】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// サイトアクセス時に非表示にしてから、フェードインさせる
$('#wrapper').hide();
$('#wrapper').fadeIn(2000);
// リンククリック時にフェードアウトしてから、画面遷移する
$('a').click(function(){
// URLを取得する
var url = $(this).attr('href');
// URLが空ではない場合
if (url != '') {
// フェードアウトしてから、取得したURLにリンクする
$('#wrapper').fadeOut(1000);
setTimeout(function(){
location.href = url;
}, 1000);
}
return false;
});
});
</script>
【HTML】
<body> <div id="wrapper"> ページ内容を記載<br> <a href="http://raining.bear-life.com/">リンク</a> </div> </body>
フェードイン、フェードアウトするスピードを調整する場合は、
「fadeIn()」、「fadeOut()」、「setTimeout()」の数値を変更します。
また、コンテンツごとに設定することも可能なので、動きのあるサイトを作ることができると思います。
※下記、追記します。
aタグに「target=”_blank”」を付けていた場合、正常に動作しないのでフェードさせるリンクにclassを追加して調整しました。
【JS】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// サイトアクセス時にbodyを非表示にしてから、フェードインさせる
$('#wrapper').hide();
$('#wrapper').fadeIn(2000);
// リンククリック時にフェードアウトしてから、画面遷移する
$('a.fadelink').click(function(){
// URLを取得する
var url = $(this).attr('href');
// URLが空ではない場合
if (url != '') {
// フェードアウトしてから、取得したURLにリンクする
$('#wrapper').fadeOut(1000);
setTimeout(function(){
location.href = url;
}, 1000);
}
return false;
});
});
</script>
【HTML】
<body>
<div id="wrapper">
ページ内容を記載<br>
<a href="http://raining.bear-life.com/" class="fadelink">リンク</a><br>
<a href="http://raining.bear-life.com/" target="_blank">リンク</a>
</div>
</body>
フェードさせるリンクに「class=”fadelink”」を追加しております。
そしてjQueryの処理で「$(‘a.fadelink’).click(function(){」の箇所を変更してます。
今までは、aタグをクリックした場合の処理を記述してましたがクラスが設定されているリンクの場合にしました。
■ サンプルページを追加しました。
【jQuery】ページアクセス、リンク時にフェードする方法｜サンプルページ