使用JQuery折叠DIV

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(),例如,如果你想要添加一点天赋.