Collapsing DIVs avec JQuery

Question

J'ai une page avec deux divs dessus. Cette page ressemble à ceci:

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

Fondamentalement, lorsque la page se charge, j'ai besoin d'attendre un peu de temps. Ensuite, j'ai besoin de montrer l'information dans la Div terminée lorsque le temps s'est écoulé. Actuellement, le finalDiv montre. Cependant, il montre ci-dessous le waitDiv. Le waitDiv devient invisible. Mais, j'ai besoin que leDiv soit positionné là où le waitDiv était. Pourquoi le fichier finalDiv apparaît-il en dessous de waitDiv même si je l'écrase?

Merci!

Answer 1

Au lieu de visibility: collapse; vous devriez utiliser display: none dans ce cas, donc il ne prend pas de place dans la page.

Quelques autres suggestions: ne passez pas une chaîne à setTimeout, passer la fonction et vous pouvez utiliser .hide() et .show() pour cette display: none je parlais, comme ceci:

$(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; 
    } 
} 

Il suffit de changer aussi le #finishedDiv être caché de la même façon au départ, comme celui-ci:

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

au lieu de .show() vous pouvez également utiliser .fadeIn() par exemple , pour ajouter un peu de flair si vous le vouliez.

Answer 2

L'effondrement visibility ne s'applique qu'aux éléments de table, c'est donc au navigateur de décider de l'affichage d'un div replié. Vous devriez essayer de ne pas afficher l'affichage et voir si cela produit l'effet que vous voulez.

Answer 3

Utilisez "display:none" comme style initial pour finishedDiv, de sorte qu'il ne soit même pas mis dans la disposition de la page. Ensuite, vous pouvez simplement utiliser toggle() pour le rendre visible:

Aucun lien, vous pouvez éviter l'utilisation de eval(...) en spécifiant le nom de la fonction à appeler par 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(); 
    } 
}