ページ遷移時にフェードイン・フェードアウト効果を出す「jquery.fadeMover」

サイト内でページの移動をする際に、フェードインやフェードアウトしてからページが切り替わるちょっぴりフェミニンな感じのアクションを演出してくれるjQueryプラグイン「jQuery.fademover.js」のご紹介。

※下記のサイトを参考にさせて頂きました。
jquery.fadeMover.js

ちょっとした動きを付けたい場合に利用できるかな～と思いますので書き留めておきます。

※<a href=”#top”>など、ページ内でのリンクを指定している<a>タグはフェードアウト動作禁止ですので注意してください。その他はOK！

1.jQueryとjquery.fademover.jsを読み込む

jQueryとjquery.fademover.jsを<head>内に読み込みます。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.fademover.js"></script>
<script>
$(function(){
	$('body').fadeMover();
});
</script>

$(function(){

$('body').fadeMover();

});

</script>

2.各オプションの初期値

フェード切り替え、フェードスピード、いくつかのオプションがあります。
記述を省略した場合は、下記の初期値が適応されます。

<script>
$(function(){
	$('body').fadeMover({
		'effectType': 1,
		'inSpeed': 800,
		'outSpeed': 800,
		'inDelay': '0',
		'outDelay': '0',
		'nofadeOut':nonmover
	});
});
</script>

$(function(){

$('body').fadeMover({

'effectType': 1,

'inSpeed': 800,

'outSpeed': 800,

'inDelay': '0',

'outDelay': '0',

'nofadeOut':nonmover

});

</script>

3.各オプションの詳細

▼effectType

フェードインとフェードアウトの動作の指定
1.フェードイン&&フェードアウト
2.フェードインのみ
3.フェードアウトのみ

▼inSpeed

フェードインのスピードをミリ秒で指定

▼outSpeed

フェードアウトのスピードをミリ秒で指定

▼inDelay

フェードイン遅延スピードをミリ秒で指定
複数要素がある場合、順番にフェードインしていきます。
「0」を指定すると遅延なくフェードインします。

▼outDelay

フェードアウト遅延スピードをミリ秒で指定します。
複数要素がある場合、順番にフェードアウトしていきます。
「0」を指定すると遅延なくフェードアウトします。