Entonces, lo que quiero hacer es ocultar el elemento durante los primeros 5 segundos. Quiero que el elemento se muestre después de 5 segundos de carga de la página. Probé muchos métodos, pero nada funcionó todavía.
aquí está mi código:
<div id="main_sec_2"></div>CSS
#main_sec_2{ position: relative; margin-left: 5px; display: none; vertical-align: top; }js
function delay () { setTimeout( function() { window.onload = function() { document.getElementById('main_sec_2').style.display = 'inline-block'; } ;}, 500 ); }Simplemente puede usar css-animation que no requiere JS.
div { opacity: 0; animation-name: randomName; animation-delay: 5s; } @keyframes randomName { 0% { opacity: 0; } 100% { opacity: 1; } } /* for visualisation purpose only */ div { height: 50vh; background-color: red; } <div id="main_sec_2"></div>Si desea utilizar JavaScript, su código JavaScript no funciona por varios motivos.
A continuación se muestra un código JavaScript funcional. (La explicación está debajo).
function delay() { window.onload = function() { setTimeout(function() { document.getElementById("main_sec_2").style.display = "inline-block"; }, 5000); } } delay(); #main_sec_2 { position: relative; margin-left: 5px; display: none; vertical-align: top; } <div id="main_sec_2">Division!</div> Texto en div utilizado con fines de visualización.
La razón por la que este código funciona es:
setTimeout se establece en 5000 , no en 500 . La razón por la que esto funciona es porque el tiempo de espera se mide en milisegundos, por lo que 5000 milisegundos es lo mismo que 5 segundos.window.onload tiene el setTimeout dentro de ella. Esto significa que cuando se llama a la función onload , setTimeout se iniciará automáticamente.delay . Tenga en cuenta que esto puede deberse a que el OP no incluyó la llamada.En conclusión, puede usar JavaScript o CSS para este problema, pero esta solución soluciona el problema a la manera de JavaScript.