[JS][CSS3] jQuery を使わずに fadeIn / fadeOut のアニメーションを実装する方法

Modified 2014-09-20 更新情報 setTimeout を使ってフェードイン・アウトするコードを旧IEでも動くコードへ書き直しました。 jQuery を使わずに、CSS3・requestAnimationFrame メソッド・setTimeout 関数で fadeIn / fadeOut のアニメーション表現を行うということをやってみました。jQuery を使えば fadeIn()、fadeOut() だけの記述で済むことですが、いざそれを使わずにとなると大変だなという印象です…。 各サンプルは、マウスオーバー時にフェードアウト・マウスアウト時にフェードインします。 HTML は共通で以下のようになっています。 <div id="box">FadeIn/Out</div> CSS3 でフェードイン・アウトする opacity の変化を transition プロパティでアニ

[lingling_yas]

“var boxOpa;box.style.opacity = 1; // フェードアウト時のアニメーション設定 function fadeOut(){ var boxOpa = parseFloat(box.style.opacity); var opaValue = .05; var limit = 0.5; // ↑ opacity値の限度 //（この設定だと opacity:0.5 まで透明に） if(boxOpa > limit){ bo