画像をフェードイン・フェードアウト（ゆるやかに表示、非表示）

<!-- html表記 -->
<form style="margin:bottom:5px;">
<input type="button" value="Fade Out" style="width:100px" onClick="fade_out_start()">
<input type="button" value="Fade In" style="width:100px" onClick="fade_in_start()">
</form>
<img id="img1" src="画像のURL" style="width:auto; height:auto; display: block; margin-left: auto; margin-right: auto;">

</form>

//    JavaScript表記
<script type="text/javascript"> //フェードイン
<!--
var n=0;
var nn=0;
var timer = 0;
var timer2 = 0;
function fade_in(){
    n=n+2;
    if(n>100) clearInterval(timer)
    else{
      document.getElementById("img1").style.filter = "alpha(opacity:"+n+")";
      document.getElementById("img1").style.opacity = n/100;
    }
}

function fade_out(){
    nn = nn - 2;
    if(nn<2) clearInterval(timer2)
    else{
      document.getElementById("img1").style.filter = "alpha(opacity:"+nn+")";
      document.getElementById("img1").style.opacity = nn/100;
    }
}

function fade_in_start(){
  n=0;
  clearInterval(timer2);
  timer=setInterval("fade_in()",150);
}

function fade_out_start(){
  nn=100;
  clearInterval(timer);
  timer=setInterval("fade_out()",150);
}

//-->
</script>

// JavaScript表記

<!--

var n=0;

var nn=0;

var timer = 0;

var timer2 = 0;

function fade_in(){

n=n+2;

if(n>100) clearInterval(timer)

else{

document.getElementById("img1").style.filter = "alpha(opacity:"+n+")";

document.getElementById("img1").style.opacity = n/100;

}

function fade_out(){

nn = nn - 2;

if(nn<2) clearInterval(timer2)

else{

document.getElementById("img1").style.filter = "alpha(opacity:"+nn+")";

document.getElementById("img1").style.opacity = nn/100;

}

function fade_in_start(){

n=0;

clearInterval(timer2);

timer=setInterval("fade_in()",150);

}

function fade_out_start(){

nn=100;

clearInterval(timer);

timer=setInterval("fade_out()",150);

}

//-->

</script>