[JS] setTimeout - Disparaître un bloc
Résolu
MastercroW
Messages postés
1259
Statut
Membre
-
popiete30 Messages postés 1 Statut Membre -
popiete30 Messages postés 1 Statut Membre -
Bonjour,
J'ai un problème avec mon Javascript. Le message apparaît après les 2 secondes, tout comme je veux, cela marche correctement. Mais après je veux qu'il disparaît automatiquement après 5 secondes par exemple.
Mais je n'arrive pas à trouver comment faire. Voici mon code qui marche pour le faire apparaître.
Merci d'avance.
J'ai un problème avec mon Javascript. Le message apparaît après les 2 secondes, tout comme je veux, cela marche correctement. Mais après je veux qu'il disparaît automatiquement après 5 secondes par exemple.
Mais je n'arrive pas à trouver comment faire. Voici mon code qui marche pour le faire apparaître.
<script src="http://code.jquery.com/jquery-latest.js"></script><script> $(function(){ $('#alertMessage').hide(); // permet de cacher le bloc setTimeout(function() { $('#alertMessage').fadeIn(1500); }, 2000); // au bout de 2 secondes }); </script> <div id="alertMessage" class="red" style="display: block;"> <b>Erreur</b> Votre mot de passe est incorrect. </div>
Merci d'avance.
3 réponses
En fin de compte j'ai copié mon titre j'ai fais une recherche j'ai trouvé un script qui correspond à ma demande mais je n'arrive pas à régler le temps.
<html>
<head>
<title></title>
<script type="text/javascript">
var alpha = 1;
function disparaitre(){
alpha -= 0.01;
document.getElementById("block").style.opacity = alpha;
if(alpha > 0)
window.setTimeout(disparaitre);
else
document.getElementById("block").style.display = "none";
}
function init(){
alpha = 1;
document.getElementById("block").style.display = "block";
window.setTimeout(disparaitre);
}
window.setTimeout(init);
</script>
</head>
<body>
<div id="block" style="position: absolute;background-color:#000000;width: 100%;top: 0%;left: 0%;;padding-top:24%;padding-bottom:24%;color: #ffffff;text-align: center;">Disparition</div>
<input id="bouton" type="button" value="recommencer" onclick="init()" />
</body>
</html>
merci à toi c'est exactement ce que je cherchais...
Pour le temps, je pense qu'il faut s'intéresser de plus près à la méthode SetTimeout http://www.w3schools.com/jsref/met_win_settimeout.asp
et voilà le code pour 5 secondes de décalage, après quelques petits essais :
Pour augmenter ou réduire le temps en millisecondes, il suffit de modifier cette ligne :
et de mettre 3000 pour 3 secondes, 10000 pour 10 et ainsi de suite.
Cheers :)
Pour le temps, je pense qu'il faut s'intéresser de plus près à la méthode SetTimeout http://www.w3schools.com/jsref/met_win_settimeout.asp
et voilà le code pour 5 secondes de décalage, après quelques petits essais :
<script>
var alpha = 1;
function disparaitre(){
alpha -= 0.01;
document.getElementById("block").style.opacity = alpha;
if(alpha > 0)
window.setTimeout(disparaitre);
else
document.getElementById("block").style.display = "none";
}
function init(){
alpha = 1;
document.getElementById("block").style.display = "block";
window.setTimeout(disparaitre,5000);
}
window.setTimeout(init);
</script>
Pour augmenter ou réduire le temps en millisecondes, il suffit de modifier cette ligne :
window.setTimeout(disparaitre,5000);
et de mettre 3000 pour 3 secondes, 10000 pour 10 et ainsi de suite.
Cheers :)