0

HTML5でビデオゲームのHUDをシミュレートしようとしています。ゲームオーバーレイのように見えるCSSスタイルのdivがあり、ナビゲーションリンクをクリックすると、divがdisplay：none状態になり、2回すばやく点滅してから、フェードインする必要があります。

さらに、divの閉じるボタンをクリックすると、最後のフェードが100％から0％に反転することを除いて、同じことが発生するはずです。

他のナビゲーションリンクや別のdivについても同じことをする必要があります。1つを動作させることができれば、他の人も動作させることができるはずです。

したがって、divの透明度は次のようになります。

クリックされる前のオフ状態0％
オン100％クリックされたとき
0％
オン100％
オフ0％
その後
1.5秒以上でフェードイン0％から100％

ナビゲーションリンク：

<li><a href="#target" id="about">About</a></li>

Div：

    <div id="overlay">
<a href="#" class="btn" id="close">X</a>
    <h3>Overlay</h3>
    Fusce commodo congue ante, quis venenatis nibh blandit ut. Aenean felis est, dictum eget venenatis ac,vestibulum vel urna. Quisque felis metus, vehicula et semper quis, fermentum a dolor.  
    </div>

これを試してみましたが、期待した効果が得られませんでした。

  $("#target").click(function() {
    //alert("Handler for .click() called.");

    // set interval
     var timeCount=0;
    setInterval(function() {


        if(timeCount == 1){
        //alert("timeCount"+ timeCount);
          $('#overlay').toggle();
        }
        if(timeCount == 2){
        //alert("timeCount"+ timeCount);
          $('#overlay').toggle();
        }
        if(timeCount == 3){
        //alert("timeCount"+ timeCount);
          $("#overlay").fadeIn("slow");
        }
        if(timeCount == 4){
          //abortTimer();
        }
        timeCount++;
      }, 50);
      });

setInterval速度が50未満の場合、オン/オフの切り替えをレンダリングするには速すぎます。フェードインが表示されます。

60を超えるものは遅すぎます。

4

1 に答える 1

0

オンとオフを1回切り替えると、現在の間隔でディスプレイが1回だけ点滅します。次のようなものが必要です。

if( timeCount < 4) $("#overlay").toggle();
else {
    $("#overlay").fadeIn("slow");
    clearInterval(timer);
}

また、2回のフラッシュでも、フラッシュは20分の1秒しか持続しません。モニターのリフレッシュレートは1秒あたり60回であるため、ブラウザーがリアルタイムであっても、表示されるのは3フレームのみです。私はあなたのことを知りませんが、私にはそれは本当に速いようです。約10フレーム（100の間隔で）表示し、10フレーム非表示にし、再度表示し、再度非表示にしてからフェードします。これにより、点滅が約0.5秒間続きます。これはまだ高速ですが、少なくとも表示されます。あなたが現在それをしている方法、それはあなたがてんかん発作を引き起こそうとしているようなものです...

于 2012-04-27T03:16:20.167 に答える