0

我正在尝试在 HTML5 中模拟视频游戏 HUD。我有一个带有 CSS 样式的 div，使它看起来像一个游戏覆盖，当单击导航链接时，我需要 div 从display:none状态转到，然后快速闪烁两次，然后淡入。

此外，当单击 div 中的关闭按钮时，应该会发生同样的情况，只是最后的淡入淡出从 100% 反转为 0%。

我必须对其他导航链接和不同的 div 做同样的事情。如果我能让一个人工作，我应该也能让其他人工作。

所以div的透明度是这样的：

点击前关闭状态 0%
on 100% 点击时
关闭 0%
on 100%
off 0%
然后
在 1.5 秒内淡入 0% 到 100%

导航链接：

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

分区：

    <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

您当前的时间间隔仅使显示屏闪烁一次，因为您将其打开然后再次关闭一次。你应该有类似的东西：

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

此外，即使有两次闪光，闪光也只会持续 20 分之一秒。显示器刷新率为每秒 60 次，因此即使浏览器是实时的，它也只会显示三帧。我不了解你，但对我来说这似乎真的很快。我会让它显示大约 10 帧（间隔为 100），隐藏 10 帧，再次显示，再次隐藏，然后淡出。这将使闪烁持续大约半秒，这仍然很快但至少可见。你现在这样做的方式，就像你试图引起癫痫发作......

于 2012-04-27T03:16:20.167 回答