setTimeout

id:wrap

id:content

挙動

id:content内のa要素に包まれたimgのopacity(alpha)を、ロールオーバー/アウトで0.20-1.00の範囲で変更

つまづいた所
setTimeoutで変更する値を、各imgの中に保存しないとダメなんだろうなと予想がつくのに、各要素ごとに値を保存して参照させる事がなかなかできなかった(知識的な意味で)。

window.onload=function(){
minAlpha=20;//一番薄い値
maxAlpha=100;//一番濃い値
dec=0.2;//減速率
refTime=50;//ミリ秒
alphaFunc();
}

function alphaFunc(){
_contentWrap=document.getElementById("content");
_img=_contentWrap.getElementsByTagName("img");
for(var i=0;i<_img.length;i++){
if(_img[i].parentNode.tagName=="A"){
_img[i].style.border="1px solid #f33";
_img[i].nowAlpha=100;
_img[i].onmouseover=mOver;
_img[i].onmouseout=mOut;
}
}
}

function mOver(){
this.flag=true;
alphaSet(minAlpha,this);
}

function mOut(){
this.flag=true;
alphaSet(maxAlpha,this);
}

function alphaSet(targetAlpha,owner){
owner.targetAlpha=targetAlpha;//ターゲットアルファ
// console.log("targetA:"+owner.targetA);
// console.log("nowA:"+owner.nowA);
//ターゲットアルファに近づける計算
owner.nowAlpha+=(owner.targetAlpha-owner.nowAlpha)*dec;
//差が1になったら止める処理
if(Math.abs(owner.nowAlpha-owner.targetAlpha)<1){
//現在のアルファをターゲットアルファにあわせてflagをfalseに
owner.nowAlpha=owner.targetAlpha;
owner.flag=false;
var alpha = parseInt(owner.nowAlpha);//意味ないかも
owner.style.opacity=alpha/100;//意味ないかも
}
owner.alpha = parseInt(owner.nowAlpha);
owner.style.opacity=owner.alpha/100;
if(owner.flag){this.setTimeout(function(){alphaSet(owner.targetAlpha,owner);},refTime);}
}