javascriptで画像をフェードインする方法

javascriptで画像をフェードインする方法

Webアプリで画像をフェードインしたい時がありjavascriptを使用して実装してみたのでメモ。
（探せばもっとよい方法があるかも。。）

正しく言えば、フェードインっぽく画像を表示しているだけ。

■実装方法

以下をheadタグの中に記述する

<script type="text/javascript">
    <!--
        opa=0; //透明度　0は透明
        opacnt=3; //透明度の増減の間隔
        timer=100; //setTimeout関数の実行間隔　ミリ秒

        // フェードイン
        function FadeInstr()
        {
            gazouId = "gazou1";
            MyIMG = document.getElementById(gazouId);
            MyIMG.style.visibility = "visible";
            FadeIn1(gazouId,opa);
        }
        //透明度を増加していきます。
        function FadeIn1(gazouId,opa)
        {
            if (opa <= 100)
            {
                MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
                MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
                opa += opacnt;
                setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
            }
        }

    //-->
</script>

bodyタグの中に以下を記述。

<IMG src="画像を指定" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr()">

上記の記述により画像の透過度が減少し画像がフェードインして見える。

以上、参考まで。

---

簡単家計簿 Androidアプリ