[JS] setTimeout - Disparaître un bloc

Résolu

MastercroW Messages postés 1094 Date d'inscription Statut Membre Dernière intervention -
popiete30 Messages postés 1 Date d'inscription Statut Membre Dernière intervention - 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
Aux in ✓ - Forum Enceintes / HiFi
Peut-on brancher un casque sur une prise auxiliaire ? - Forum Casque et écouteurs
Dc in - Forum Disque dur / SSD
Deco in paris avis ✓ - Forum Consommation & Internet

3 réponses

Réponse 1 / 3

MastercroW Messages postés 1094 Date d'inscription Statut Membre Dernière intervention 163

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

Réponse 3 / 3

popiete30 Messages postés 1 Date d'inscription Statut Membre Dernière intervention

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

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

Que veut dire " in da place " ?

qu'est ce qu'une prise DC IN ?

Avis site DECO IN PARIS decoinparis.com [SUJET GROUPÉ].

Votre réponse

Discussions similaires