html ページの迁移时にフェードアウト，フェードイン效果をだすためのjQuery的プラグイン

Posted 2021-05-11

/*
1.以下のサイトからjQueryプラグインをダウンロードします。
jquery.fadeMover
http://www.detelu.com/fademover/
*/

/* 2.jQueryとjquery.fademover.jsを読み込む */
<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>


/*3.各オプションの初期値*/
<script>
$(function(){
	$('body').fadeMover({
		'effectType': 1,
		'inSpeed': 800,
		'outSpeed': 800,
		'inDelay': '0',
		'outDelay': '0',
		'nofadeOut':nonmover
	});
});
</script>

/*4.各オプションの設定*/
<script>
$(document).ready(function() {
    $("body").fadeMover({
            'effectType': 1,
　　　　　　　//1:フェードイン&&フェードアウト　2:フェードインのみ　3:フェードアウトのみ
            'inSpeed': 800,
　　　　　　　//フェードインのスピードをミリ秒で指定します。
            'outSpeed': 800,
 　　　　　　//フェードアウトのスピードをミリ秒で指定します。
            'inDelay' : '0',
            //フェードイン遅延スピードをミリ秒で指定します。
            //複数要素がある場合順番にフェードインしていきます。「0」を指定すると遅延なくフェードインします。
            'outDelay' : '0',
            //フェードアウト遅延スピードをミリ秒で指定します。
            //複数要素がある場合順番にフェードアウトしていきます。「0」を指定すると遅延なくフェードアウトします。
            'nofadeOut' : 'nonmover'
            //<a href="#top">など、ページ内リンクの指定をしている<a>タグはフェードアウト動作禁止にしています。
            //それ以外の<a>タグでフェードアウト動作させたくない場合のclass名を指定します。
            //<a href="○○○.html" class="nonmover">とclass指定した<a>タグはフェードアウト動作禁止になります。
    });
});
</script>

/* 5.demoサイト */
http://kyoyacafe-hana.com/index.html