-14

次のjsコードのループを作成したい。私を助けてください。

function fade90() { document.getElementById("myDiv").style.opacity="0.90"; setTimeout("fade80()", 100); }
function fade80() { document.getElementById("myDiv").style.opacity="0.80"; setTimeout("fade70()", 100); }
function fade70() { document.getElementById("myDiv").style.opacity="0.70"; setTimeout("fade60()", 100); }
function fade60() { document.getElementById("myDiv").style.opacity="0.60"; setTimeout("fade50()", 100); }
function fade50() { document.getElementById("myDiv").style.opacity="0.50"; setTimeout("fade40()", 100); }
function fade40() { document.getElementById("myDiv").style.opacity="0.40"; setTimeout("fade30()", 100); }
function fade30() { document.getElementById("myDiv").style.opacity="0.30"; setTimeout("fade20()", 100); }
function fade20() { document.getElementById("myDiv").style.opacity="0.20"; setTimeout("fade10()", 100); }
function fade10() { document.getElementById("myDiv").style.opacity="0.10"; setTimeout("hide()", 100); }

これを書きます。これは正しいです？そうでない場合は、これを修正してください。

function cls_msg(){
    for (var i=1;i<10;i++)
    {
    setTimeout(document.getElementById("myDiv").style.opacity=100-(i*10), 100);
    }
}

ありがとう

4

2 に答える 2

7

実際の質問に答える前に、フェージングの問題を解決するためのより適切な解決策を提供します。

実際の値を変更してスタイルに再割り当てするだけでよく、すべてのメソッドを呼び出して DOM を再クエリする必要はありません。

function fadeIn( node, v ) {
    node.style.opacity = v || 1;

    if( v < 1 ) {
        setTimeout( fadeIn.bind( null, node, v + 0.1 ), 25 );
    }
 }

function fadeOut( node, v ) {
    node.style.opacity = v || 1;

    if( v > 0 ) {
        setTimeout( fadeOut.bind( null, node, v - 0.1 ), 25 );
    }
}

これは、タスクを達成する 1 つの方法の非常に基本的な例です。次のように呼び出すことができます

fadeOut( document.getElementById("myDiv") );

アニメーションを使用して従来のブラウザーをサポートする必要がない場合は、ブラウザー/ css トランジションに任せたほうがよいかもしれません。それは次のように見える可能性があります

function fadeIn( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 1;
}

function fadeOut( node ) {
    node.style.transition = 'all 400ms ease-in';
    node.style.opacity = 0;
}

transitionを設定するだけでなく、「あまりレガシーではない」ブラウザの-ms-transition、-moz-transitionなどの特定のブラウザ ベンダー プレフィックスもすべて設定したい場合があることに注意してください。

最終的に質問に答えるには、配列を使用して複数の関数をループする必要があります。これは次のようになります。

[ fade90, fade80, fade70, fade60,
  fade50, fade40, fade30, fade20,
  fade10, hide ].forEach(function( method, i, arr ) {
      setTimeout(function() {
          if( typeof arr[ i+1 ] === 'function' ) {
              !i && method();
              setTimeout( arr[ i+1 ], 25 * i );
          }
      }, 25);
});

これらのメソッドも書き直す必要があることに注意してください。これらのメソッドは、それ自体を呼び出しsetTimeoutたり、ターゲット ノードを再クエリしたりしないでください。私のアプローチの例を示したかっただけです。

于 2013-03-04T15:34:21.190 に答える
2

あなたが何を求めているのかわからないのですが、もう少しきちんとしたものを提案できますか?

function fade(n, el) {
  el.style.opacity = n;
  n = n - 0.1;
  if (n.toFixed(1) > 0) {setTimeout(function() {fade(n, el);},100);}
  else {setTimeout(function() {hide(el);}, 100);}
}

function hide(el) {
  el.style.visibility='hidden';
}

そして、最初に呼び出します

fade(0.9, document.getElementById("myDiv"));

例: http://jsfiddle.net/XY4yM/

于 2013-03-04T15:27:12.070 に答える