11545 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Faire apparaître une div après un délai de quelques secondes

Bonjour

je cherche une méthode pour qu'à l'ouverture de ma page un lien texte (placer dans une div) n'apparaisse qu'après un délai de quelques secondes (5s.).

J 'imagine que ça doit se faire en javascript (langage que je ne maitrise que très peu).
peut-être qu'avec le css3 et l'effet transition "ease-out" il y a quelquechose à faire ?

si vous pouvez me diriger vers un code, ou une autre méthode (peut-être le html5 le permet-il ?!)

Merci d'avance
Bonjour,
quelque chose comme :

window.onload = function()
{
  setTimeout(function()
  {
    document.getElementById("div").style.display = "block";
  }, 5000);
}

C'est un code qui affiche en block le truc dont l'id est div et qui était au départ en display: none au bout de 5 secondes après le chargement de la page. Ton bloc apparaîtra subitement.
Sinon tu peux le faire apparaître d'une manière un peux plus stylisée : en le faisant arriver d'ailleurs, en passant d'une hauteur nulle à sa hauteur normale... etc. Et là les propriétés de transitions CSS3 pourront t'être utile.
En fait le principe va être le même sauf que tu va devoir modifier une propriété autre que display.
Pour approfondir et comprend ce que je raconte, une seule solution : apprendre le Javascript, même si on peux t'aider.

Prince-Leto
Modifié par Prince-Leto (28 Jun 2012 - 19:02)
Ou, si tu veux utiliser la libraire jQuery qui te facilitera pas mal de choses :


//<![CDATA[

jQuery(document).ready(function(){

$('#monlien').hide(0).delay(5000).show(200);
});

//]]>


$('#monlien')
: ciblage de l'élément directement (mais ca pourrait être son parent ou je ne sais quoi que tu veux masquer/faire apparaitre)
.hide(0)
: masquage instantané au chargement page (ne pas masquer en css pour l'accessibilité)

.delay(5000)
:attendre 5000ms

.show(200)
:faire apparaitre en 200ms

[/code]
Modifié par elz64 (29 Jun 2012 - 11:11)
Prince-Leto a écrit :
Bonjour,
quelque chose comme :

window.onload = function()
{
  setTimeout(function()
  {
    document.getElementById(&quot;div&quot;).style.display = &quot;block&quot;;
  }, 5000);
}

C'est un code qui affiche en block le truc dont l'id est div et qui était au départ en display: none au bout de 5 secondes après le chargement de la page. Ton bloc apparaîtra subitement.
Sinon tu peux le faire apparaître d'une manière un peux plus stylisée : en le faisant arriver d'ailleurs, en passant d'une hauteur nulle à sa hauteur normale... etc. Et là les propriétés de transitions CSS3 pourront t'être utile.
En fait le principe va être le même sauf que tu va devoir modifier une propriété autre que display.
Pour approfondir et comprend ce que je raconte, une seule solution : apprendre le Javascript, même si on peux t'aider.

Prince-Leto
elz64 a écrit :
Ou, si tu veux utiliser la libraire jQuery qui te facilitera pas mal de choses :


//&lt;![CDATA[

jQuery(document).ready(function(){

$('#monlien').hide(0).delay(5000).show(200);
});

//]]&gt;


$('#monlien')
: ciblage de l'élément directement (mais ca pourrait être son parent ou je ne sais quoi que tu veux masquer/faire apparaitre)
.hide(0)
: masquage instantané au chargement page (ne pas masquer en css pour l'accessibilité)

.delay(5000)
:attendre 5000ms

.show(200)
:faire apparaitre en 200ms

[/code]
Sujet clos
Aller à