0

我有一个问题，我会解释。我正在用 HTML5 和 CSS3 制作动画。我的想法是一架飞机飞来飞去，过了一会儿它发射了一枚导弹。我要做的是让导弹在那之后出现。我考虑过一段时间（我选择的任何时间）使用 javascript 来更改我的 div 的 z-Index 属性（因为我将导弹图像放入 div 容器中）。为此，我在底部找到了睡眠功能。我创建了我知道它有效的“出现”函数，因为它改变了我的 zIndex 值，但它不会等待我想要的 2 秒。

我也认为我有使用可见性属性的解决方案，但我有同样的问题，睡眠功能根本不等待。

有什么建议么？谢谢

    function sleep(milliseconds) {
      var start = new Date().getTime();
      for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
          break;
        }
      }
    }

    function appear(object){

    sleep(200000);
    var objective = document.getElementById(object);

    objective.style.zIndex=1;
4

2 回答 2

0

您可以将函数传递给setTimeout将在 x 毫秒内调用该函数的函数。

function waitForMe() {
    alert('triggered!');
}

// Call waitForMe in 200000ms
setTimeout(waitForMe, 200000);

因此，对于您的示例，您可能希望使用 2000（2 秒），而不是 200000（200 秒）：

function appear(object) {
    setTimeout(function () {
        var objective = document.getElementById(object);
        objective.style.zIndex=1;
    }, 2000);
}

隐藏和显示元素

您可以通过以下几种方式隐藏和显示方法：

  1. 按照您的建议使用z-index，可能不是最好的方法，因为我们实际上可以隐藏它而不是将其发送到页面的后面。

    objective.style.zIndex = 1;

  2. 使用display，这完全隐藏了对象。

    // hide
objective.style.display = 'none';
// show
objective.style.display = 'block';

  3. 使用visibility，这将隐藏对象，但仍会占用页面空间。position:fixed如果您使用或，这无关紧要position:absolute。

    // hide
objective.style.visibility = 'hidden';
// show
objective.style.visibility = 'visible';
于 2013-03-26T01:05:56.530 回答
0

您可以围绕目标创建一个 div，然后像这样使用 javascript 添加它

  document.getElementById('objectivespan').innerHTML=imagehere;

除此之外，您可以使用

  objective.style.visibility='hidden';

并将其更改为objective.style.visibility='visible';

对于延迟，使用

  function sleep(){
      alert('slept');
  }
  SetTimeout('sleep', 10000);
于 2013-03-26T01:07:07.583 回答