jquery.fadeMoverはページの遷移時にフェードアウト、フェードイン効果をだすためのjQueryプラグインです。
Overview
指定された要素をフェードインしながら表示し、<a>タグをクリックしてページを移動する場合にフェードアウトしてから移動します。
<a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。
[2012-08-28] 「nofadeOut」で複数classの指定がある場合動作するように修正しました。（hasClassでチェック）。あとファイルを直接ダウンロードするように修正しました。
[2012-02-16] 以前作成していたものに少し手を加え、要素を順番にフェードアウト、フェードインさせるオプション「inDelay」「outDelay」もつけました。フォトギャラリー等で少し変わった動きがほしい場合などに利用できるかと思います。
導入方法
jQueryとjquery.fademover.jsを読み込みます。下記のようにHTMLファイルの<head>内に下記を記述します。ファイルへのパスは適時変更してください。外部ファイルに記述して読み込んでもOKです。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.fademover.js"></script>
<script>
$(function(){
$('body').fadeMover();
});
</script>
</head>
Options
フェード動作のきりかえ、フェードスピードの調節等、いくつかのオプションを用意しています。記述を省略した場合は下記の初期値が適応されます。
各オプションの初期値
<script>
$(function(){
$('body').fadeMover({
'effectType': 1,
'inSpeed': 800,
'outSpeed': 800,
'inDelay' : '0',
'outDelay' : '0',
'nofadeOut' : 'nonmover'
});
});
</script>
各オプションの詳細
- effectType {'effectType': 1}
- フェードインとフェードアウトの動作をきりかえます。1,2,3のいずれかを指定します。
1:フェードイン&&フェードアウト 2:フェードインのみ 3:フェードアウトのみ - inSpeed {'inSpeed': 800}
- フェードインのスピードをミリ秒で指定します。
- outSpeed {'outSpeed': 800}
- フェードアウトのスピードをミリ秒で指定します。
- inDelay {'inDelay': 0}
- フェードイン遅延スピードをミリ秒で指定します。複数要素がある場合、順番にフェードインしていきます。「0」を指定すると遅延なくフェードインします。
- outDelay {'outDelay': 0}
- フェードアウト遅延スピードをミリ秒で指定します。複数要素がある場合、順番にフェードアウトしていきます。「0」を指定すると遅延なくフェードアウトします。
- nofadeOut {'nofadeOut': 'nonmover'}
- <a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。それ以外の<a>タグでフェードアウト動作させたくない場合のclass名を指定します。
<a href="○○○.html" class="nonmover">とclass指定した<a>タグはフェードアウト動作禁止になります。
これはajax等でコンテンツを書き換える場合、利用するかも？と思ってつけている機能です。
Demo
各オプションを変更した際の動作デモです。
Tips
javascriptの読み込みの関係で、フェードインする前に全部表示されてから動作する場合があります。この場合フェード処理する要素のスタイル自体に「opacity:0」の記述をしておけば一番いいのですが、Javascriptを切っている場合、表示されなくなります。このあたりは少し悩ましいところですが、javascriptでhead要素にスタイルを追加する方法があります。
必ず「$(function(){〜});の外に記述」するようにして下さい。これで全部表示されることがなく、スームーズにフェードインするようになるはず。お試しください。
※ この記述はフェードアウトのみの場合は必要ありません。
<script>
$("head").append('<style>.box { opacity: 0;-ms-filter:"alpha( opacity=0 )";filter: alpha( opacity=0 ); }</style>');
$(function(){
$(".box").fadeMover();
});
</script>
Download