用JQuery摺疊DIV

我有一個頁面上有兩個div。此頁面看起來如下：用JQuery摺疊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中顯示信息。目前，完成的DIV確實顯示。但是，它顯示在waitDiv下面。 waitDiv不可見。但是，我需要把finishedDiv放在waitDiv所在的位置。爲什麼finishedDiv出現在waitDiv下面，即使我將它摺疊？

謝謝！

來源

2010-07-01 user70192

而不是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()例如，如果你想要添加一些天賦。

來源

2010-07-01 17:25:04

或者**被調用。 show（'slow'）; **等。請參閱http://api.jquery.com/category/effects/ – GalacticCowboy 2010-07-01 17:49:41

在頁面加載時使用JQuery隱藏'finishedDiv'可能會更好，然後顯示它在預定的時間之後。否則，那些沒有Javascript的人將永遠看不到DIV內容。請記住，屏幕閱讀器通常會忽略設置爲「display：none」的內容。 – Mike 2010-07-01 18:41:24

崩潰visibility僅適用於表格元素，所以它真的取決於瀏覽器如何顯示摺疊的div。你應該嘗試將display設置爲none，看看是否達到你想要的效果。

來源

2010-07-01 17:25:47

使用"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(); 
    } 
}

來源

2010-07-01 17:38:05 Chadwick

用JQuery摺疊DIV

回答

相關問題