setTimeout

opacity(alpha)を、ロールオーバー/アウトで0.20-1.00の範囲で変更

setInterval を setTimeout に置き換えてみた、おおむねokぽい

問題点

例えばロールオーバーしてopacityが0.5くらいの時にロールアウトすると0.5から1.0に戻ろうとする。

ボタンがたくさんあった場合は0.5でロールアウトしても設定した値まで変化させて(この場合0.2まで)から1.0に戻ったほうが気持ちよく動くはずなので、どうすればそうゆう動きになるのか考えなきゃなぁ、というところ。

でもそれは好みの問題かも。


window.onload=function(){
_bt=document.getElementById("bt");
_ta=document.getElementById("ta");
nowA=100;
_ta.value=nowA;
dec=0.2;//減速
maxA=100;//最大アルファ
minA=20;//最小アルファ

flag=true;
reftime=20;//リフレッシュタイム:ミリ秒

//現在のalphaを、targetAlphaに近づける関数
function alphaSet(targetA){
targetAA=targetA;
nowA+=(targetAA-nowA)*dec;
if(Math.abs(nowA-targetAA)<1){
nowA=targetAA;
flag=false;
}
var alpha = parseInt(nowA);
_bt.style.opacity = alpha/100;
_ta.value=alpha/100;

if(flag){
setTimeout(function(){
alphaSet(targetAA);
},reftime);
}
}

//マウスオーバー
_bt.onmouseover=function(){
flag=true;
alphaSet(minA);
}

//マウスアウト
_bt.onmouseout=function(){
flag=true;
alphaSet(maxA);
}
}