Свертывание DIV с помощью JQuery

Question

У меня есть страница с двумя элементами.Эта страница выглядит следующим образом:

<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>

Обычно, когда страница загружается, мне нужно немного подождать.Затем мне нужно показать информацию в FinishDiv, когда время истекло.В настоящее время FindedDiv действительно показывает.Тем не менее, он показывает ниже waitDiv.WaitDiv становится невидимым.Но мне нужно, чтобы готовый каталог был расположен там, где был ожидание.Почему FinDD появляется ниже 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

Используйте "display:none" в качестве начального стиля для FinishDiv, поэтому он даже не помещается в макет страницы.Затем вы можете просто использовать 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();
  }
}

1010 *

Answer 3

Свертывание visibility относится только к элементам таблицы, поэтому браузер должен решать, как отобразить свернутый div.Вы должны попробовать установить display в none и посмотреть, достигает ли это желаемого эффекта.