Question

我有一个页面上有两个div。此页面如下所示：

<div id="waitDiv">
  <div id="waitText">Analyzing...</div>
  <img src="wait.gif" />
</div>

<div id="finishedDiv" style="visibility:collapse;">
  <div>You may now proceed</div>
  <div>Please remember that....</div>
</div>

<script type="text/javascript">
  $(document).ready(function () {
    var progressTimer = setTimeout("updateState()", 5000);
  });

  var count = 1;
  function updateState() {
    if (count <= 5) {
      var progressTimer = setTimeout("updateState()", 5000);
      count = count + 1;
    }
    else {
      $("#waitDiv").css("visibility", "collapse");
      $("#finishedDiv").css("visibility", "visible");
    }
  }
</script>

基本上，当页面加载时，我需要等待一段时间。然后，我需要在时间结束时在finishedDiv中显示信息。目前，finishedDiv确实显示了。但是，它显示在waitDiv下面。 waitDiv变得不可见。但是，我需要将finishedDiv定位在waitDiv所在的位置。为什么finishDiv出现在waitDiv下面，即使我崩溃了？

谢谢！

Answer 1

在这种情况下，您应该使用visibility: collapse;，而不是display: none，因此页面中不会占用任何空间。

其他一些建议：不要将字符串传递给setTimeout，传递该功能，您可以使用.hide()和.show()代替我所说的display: none，像这样：

$(document).ready(function () {
  var progressTimer = setTimeout(updateState, 5000);
});

var count = 1;
function updateState() {
  if (count <= 5) {
    var progressTimer = setTimeout(updateState, 5000);
    count = count + 1;
  }
  else {
    $("#waitDiv").hide();     //display: none;
    $("#finishedDiv").show(); //restore display, in this case display: block;
  }
}

也可以最初以同样的方式更改#finishedDiv，如下所示：

<div id="finishedDiv" style="display: none;">

除了.show()，您还可以使用.fadeIn()，例如，如果您愿意，可以添加一些天赋。

Answer 2

折叠visibility仅适用于表格元素，因此浏览器应该如何显示折叠的div。您应该尝试将display设置为none，看看是否达到了您想要的效果。

Answer 3

使用"display:none"作为finishedDiv的初始样式，因此它甚至没有放入页面的布局中。然后，您只需使用toggle()使其可见：

不相关，您可以通过指定eval(...)

要调用的函数的名称来避免使用setTimeout(...)

$(document).ready(function () {
  var progressTimer = setTimeout(updateState, 5000);
});

var count = 1;
function updateState() {
  if (count <= 5) {
    var progressTimer = setTimeout(updateState, 5000);
    count = count + 1;
  }
  else {
    $("#waitDiv").toggle();
    $("#finishedDiv").toggle();
  }
}

使用JQuery折叠DIV

3 个答案: