Свертывание DIVs с JQuery

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> 

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

Answer 3

Использовать "display:none" как начальный стиль для готовогоDiv, поэтому его даже не помещают в макет страницы. Тогда вы можете просто использовать toggle(), чтобы сделать его видимым:

Unrelated, вы можете избежать использования 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(); 
    } 
}