アニメーション：
Nodeをフェイドで切り替え
対象Nodeの透明度をフェイドアウト・フェイドインさせ、「opacity=0」のタイミングでNode内の表示内容を切り替える。
Node
Nodeを指定 id値を文字列で指定してもよい
Number1
フェイド速度を指定 1 – 100 の整数
Number2
切り替える子Nodeの番号 子Nodeを配列として考えた時の要素番号 ／ 省略した場合は順番通り
●必須引数 ●オプション引数(省略可能)
記述例
$aniFadeSW($id('aNode'), 10)
$aniFadeSW('aNode', 5, 2)
注意点
切り替える内容は、対象Nodeの子Nodeとして記述しておく。子Nodeの数だけ切り替えが行われて、ループする。なお、最初に表示しておく1つの子Node以外は「display: none」に設定しておくこと。
表示中の子Nodeの class には「sw_now」が追加されるので、必要に応じて別処理で参照可能。また、ページ読み込み時の最初の子Nodeを任意に設定したい場合も class に「sw_now」を設定することで対応可能。
動作サンプル
4つの子Nodeを持った親Nodeを対象としたサンプル。
SAMPLE 1 / BOX 1
SAMPLE 1 / BOX 2
SAMPLE 1 / BOX 3
SAMPLE 1 / BOX 4
HTML :
<div id="sample1">
<div class="sw_now">SAMPLE 1 / BOX 1></div>
<div>SAMPLE 1 / BOX 2></div>
<div>SAMPLE 1 / BOX 3></div>
<div>SAMPLE 1 / BOX 4></div>
</div>
Javascript :
$aniFadeSW($id('sample1'),10);
$aniFadeSW($id('sample1'),50);
$aniFadeSW('sample1',20,2);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。