[JS] setTimeout - Disparaître un bloc

Résolu

MastercroW -

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.

<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.
--
░░░░▒▒▒▒████ ♠ MastercroW ♠ ████▒▒▒▒░░░░

Afficher la suite

3 réponses

MastercroW Auteur

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>

Réponse 2 / 3
cynoque
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 :
```
<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 :)
0
Réponse 3 / 3
popiete30
Bonjour je viens de découvrir ce script il fonctionne mais comment faire pour changer la taille du texte les couleur de fond et de texte c'est bon mais je ne trouve pas comment faire pour la taille
Merci a vous et bon week-end

0

[JS] setTimeout - Disparaître un bloc

3 réponses

Discussions similaires

Newsletters