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アプリ