2

jQueryを使用せずにマウスアウトでHTML要素onmouseoverをフェードインおよびフェードアウトするためのエレガントなソリューションを探しています（昔ながらの私を呼んでください）。

理論的には、以下のjsソリューションは機能するはずですが、機能に問題があります。誰かが私を正しい方向に向けたり、別のソリューションを提供したりできますか？

私のJs関数はであり、挿入されるHTMLはページにあるものと同じです...

function fadeIn(element) {

   for (i = 0; i < 100; i++) {
      var value = 0 + i;


      element.style.opacity = value;
      element.style.filter = 'alpha(opacity=' + value + ')';
   }
}

function fadeOut(element) {

   for (i = 0; i < 100; i++) {
      var value = 100 - i;

      element.style.opacity = value;
      element.style.filter = 'alpha(opacity=' + value + ')';
      element.innerHTML = "<div class='container' id='container' onmouseover='fadeOut(this)'><img src='./images/myImage.jpg' onload='fadeIn(this.parent)' /></div>";

   }
}
4

1 に答える 1

2

変化率を制御するために何もしていないため、フェードイン/アウトは正しく機能しません。それはすぐに実行され、要素を表示/非表示にします。

次のようなものを試してください。

function fadeIn(el) {
   var opac = 0;
   var i = setInterval(function() {
     opac += 10;
     if (opac >= 100) {
       clearInterval(i);
       opac = 100;
     }
     el.style.opacity = opac;
     el.style.filter = 'alpha(opacity=' + opac + ')';

   }, 20);
}

それは200ms（20 * 100/10）以上でフェードインするはずです。数字で遊んで速度を調整します。

マウスオーバー/アウトに関しては、他のイベントと同じようにイベントをバインドできます。

一般に、HTML属性を使用して、あなたが持っているようなJSイベントを添付することは嫌われています。通常、次のようなヘルパーがいます：https ://gist.github.com/955642

メインメソッドのどれをチェックするか、addEventListenerまたはattachEventブラウザがサポートする独自のメソッドを作成したいとします。

于 2012-04-25T04:20:57.113 に答える