トップページ >  glayer.js >  フェードイン・フェードアウトする
初版2013/03/29: 最終更新日2013/03/29
フェードイン・フェードアウトする
目次
フェードイン・フェードアウトする
フェードイン・フェードアウトする時間を指定する
フェードイン・フェードアウト後にcallback関数を呼ぶ
フェードイン・フェードアウトする
レイヤー表示と同時にその他のエレメントも操作したい場合で、フェードインするにはGlayer.fadeInParallel();を使用します。

div要素(id=sample1)
以下のボタンを押してください。フェードインされたら、id=sample1の要素が表示されます。ページをリロード(F5)を押すろ初期表示に戻ります。



以下、ソースです。

<input type="button" value="ボタン" onclick="Glayer.fadeIn();" />

フェードインしたあとに、フェードインした部分をonclickする動作でフェードアウトしたい場合は、エレメント.onclickでフェードアウトさせます。
フェードアウトさせるには、Glayer.fadeOutParallel();を使用します。以下のボタンを押してください。



以下、ソースです。

<input type="button" value="ボタン" onclick="a();" />
<script type="text/javascript" >
<!--
function a(){
Glayer.fadeIn(['mokuji','where'],null).onclick = function(){Glayer.fadeOut(['mokuji','where'],null);};
}
//-->
</script>

フェードイン・フェードアウトする時間を指定する
フェードイン・フェードアウトする時間はデフォルト800msです。この時間は第二引数で指定することができます。
以下のボタンを押してください。フェードインは2秒、フェードアウトは4秒かかるように指定しています。



以下、ソースです。

<input type="button" value="ボタン" onclick="b();" /><br /><br />
<script type="text/javascript" >
<!--
function b(){
Glayer.fadeIn(null,{duration: 2000}).onclick = 
    function(){Glayer.fadeOut(null,{duration: 4000});};  // 1行で書いてください
}
//-->
</script>

フェードイン・フェードアウト後にcallback関数を呼ぶ
フェードイン、フェードアウトする時にcallback関数を呼ぶことができます。
第二引数に、callback:function(){~}を指定します。以下のボタンを押してください。



以下、ソースです。

<input type="button" value="ボタン" onclick="c();" /><br /><br />
<script type="text/javascript" >
<!--
function c(){
 // 以下を1行で書いてください
Glayer.fadeIn(null,{callback:function(){alert('フェードイン完了');}}).onclick =
   function(){Glayer.fadeOut(null,{callback:function(){alert('フェードアウト完了');}});};
}
//-->
</script>