[JS] setTimeout - Disparaître un bloc

Résolu/Fermé

MastercroW Messages postés 1094 Date d'inscription dimanche 3 octobre 2010 Statut Membre Dernière intervention 31 mai 2019 - 19 nov. 2011 à 22:46
popiete30 Messages postés 1 Date d'inscription samedi 20 décembre 2008 Statut Membre Dernière intervention 6 décembre 2014 - 6 déc. 2014 à 08:49

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.

A voir également:

Settimeout in jquery
Navigation in private - Guide
Av in - Forum Audio
Deco in paris avis ✓ - Forum Consommation & Internet
Déco in paris site fiable ???? - Forum Consommation & Internet
Rf in - Forum Téléviseurs

3 réponses

Réponse 1 / 3

MastercroW Messages postés 1094 Date d'inscription dimanche 3 octobre 2010 Statut Membre Dernière intervention 31 mai 2019 163
19 nov. 2011 à 22:51

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
Modifié par cynoque le 24/02/2013 à 17:13

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

Réponse 3 / 3

popiete30 Messages postés 1 Date d'inscription samedi 20 décembre 2008 Statut Membre Dernière intervention 6 décembre 2014
Modifié par popiete30 le 6/12/2014 à 08:50

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

Discussions similaires

[URGENT] Que veut dire prise (AUX IN)?

qu'est ce qu'une prise DC IN ?

autoradio Android que peut-on brancher sur vidéo input

Que veut dire " in da place " ?

Avis site DECO IN PARIS decoinparis.com (lina sofas)