トップページ >  glayer.js >  フェードイン・フェードアウトする
初版2013/03/29: 最終更新日2013/03/29
フェードイン・フェードアウトする
目次
フェードイン・フェードアウトする
フェードイン・フェードアウトする時間を指定する
フェードイン・フェードアウト後にcallback関数を呼ぶ
フェードイン・フェードアウトする
フェードインするにはGlayer.fadeIn();を使用します。
以下のボタンを押してください。フェードインされたら、ページをリロード(F5)を押すろ初期表示に戻ります。



以下、ソースです。

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

第一引数にはidを指定するのですが、指定しなかった場合、またはnullを指定した場合はglayerというidが指定されたとみなして実行されます。
fadeInの戻り値はエレメントとなります。以下のボタンを押すと確認できます。



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



以下、ソースです。

<input type="button" value="ボタン" onclick="a();" />
<script type="text/javascript" >
<!--
function a(){
Glayer.fadeIn().onclick = function(){Glayer.fadeOut();};
}
//-->
</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>