AJAXのお勉強

javascriptでフェードイン、フェードアウト＠AJAX

javascriptでフェードイン、フェードアウト処理を行います。

styleのfilter:alpha(opacity)を徐々に増やすか、
もしくは減らす処理を行いフェードイン、アウトします。

IEでしか動作しません。


<html>
<head>
<title>javascript フェードイン・フェードアウト</title>
<script type="text/javascript">
<!--

var percent = 0;
var percentPlus = 2;

function fadeIn() {
    var obj = document.getElementById("image");

    obj.style.filter = "alpha(opacity=" + percent + ")";
    
    percent += percentPlus;

    if (percent < 100) {
        setTimeout("fadeIn()",20);
    }
}

function fadeOut() {
    var obj = document.getElementById("image");

    obj.style.filter = "alpha(opacity=" + percent + ")";

    percent -= percentPlus;
    if(percent >= 0) {
        setTimeout("fadeOut()",20);
    }
}
// -->
</script>
</head>
<body>
<input type="button" value="フェードイン" onClick="fadeIn()">
<input type="button" value="フェードアウト" onClick="fadeOut()"><br>

<img id="image" src="loadinfo02.gif" style="filter:alpha(opacity=0)">
</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.