1

jQueryからfadeOutに似た簡単な関数を書いてみましたが、行き詰まりました。すべてが機能しますが、css で書いているように、不透明度は 1 からではなく 0.02 から減少します。console.log() によるコードの検査は、最初のステップが空で表示され、次に -0.02、-0,04 になります。これが私のコードcssです：

#box {
  background: red;
  height: 200px;
  opacity:1;
  width: 200px;
}

JS:

 var box = document.getElementById("box");

 setInterval(function() {
  console.log(box.style.opacity);
  box.style.opacity -= 0.02;
 }, 1000)

これがcodepenですhttp://codepen.io/Kuzyo/pen/xDc 誰かが何が起こっているのか説明できますか. ありがとう。

4

2 に答える 2

3

window.getComputedStyle()CSS プロパティを読み取るときに必要です。

 box.style.opacity = window.getComputedStyle(box).opacity - 0.02;

デモ: http://jsfiddle.net/aCKNz/

于 2013-07-28T06:45:57.130 に答える
1

element.style.opacitystyle="..."スタイルシートにある場合ではなく、要素の属性に定義されている場合にのみスタイルに応答します。

代わりにこれを試してください：

var box = document.getElementById('box');
(function(){var o=1;setTimeout(function(){box.style.opacity=o-=0.2;if(o>0)setTimeout(arguments.callee,1000);},1000);})();

または、展開された形式で：

var box = document.getElementById('box');
(function(){
    var o=1;
    setTimeout(function(){
        o -= 0.2;
        box.style.opacity = o;
        if(o>0) setTimeout(arguments.callee,1000);
    },1000);
})();
于 2013-07-28T06:47:55.527 に答える