[JS] Animation avec setTimeout ne marche pas

Sujet résolu

25 octobre 2016 à 11:29:00

Bonjour,

je suis actuellement à cette partie du cours => https://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript/la-gestion-du-temps-3

Mais mon code avec setTimeout ne marche pas, alors que si je fais par exemple un event "click" sur l'image l'opacité se modifie.

<!doctype html>

<html>

	<head>

		<title>Javascript</title>
		<meta charset="utf-8"/>
		<style>

		#wow { opacity: 1; }

		</style>

	</head>

	<body>

	<p><img src="wow.png" alt="wow" id="wow"/></p>

		<script>

			var img = document.getElementById("wow");

			function opacity()
			{
				var imgStyle = img.style,
					result = imgStyle.opacity = parseFloat(imgStyle.opacity) - 0.1;
					if(result > 0.2)
					{
						setTimeout(opacity, 1000);
					}
			}

			opacity();

		</script>

	</body>

</html>

Merci.

SaShimy

25 octobre 2016 à 12:19:22

Bonjour,

Simple supposition, ton code se fait trop tôt par rapport au chargement de la page essaie de mettre l'exécution de la fonction dans ceci :

document.addEventListener("DOMContentLoaded", function(event) { 
  //ton code
});

(Cette fonction attend que tout ton DOM est été chargé pour se lancer : ref

Binary Lost

25 octobre 2016 à 12:36:46

Bonjour à toi,

cela ne donne rien non plus, je n'ai aucun message d'erreur dans ma console de navigateur, je suis sous la dernière version de Firefox, j'ai essayé avec Microsoft Edge et rien non plus.

Anonyme

25 octobre 2016 à 17:40:00

monTruc.style.opacity = "0.4";

var entierOpaque = 0.5;
Montruc.style.opacity = entierOpaque.toString();

Binary Lost

25 octobre 2016 à 17:56:06

Salut,

déjà essayé sous forme de chaîne de caractères mais rien non plus.

EDIT : je viens de faire un test avec setInterval et ça fonctionne, je ne vois pas du tout pourquoi avec setTimeout cela ne marche pas. Je mets donc le sujet en résolu. Et si jamais au passage quelqu'un trouve pourquoi, je suis bien preneur.

-
Edité par Binary Lost 25 octobre 2016 à 19:43:36

Anonyme

26 octobre 2016 à 8:42:36

bon sang mais c'est bien sur (enfin du coup je doute ^^)

C'est que setTimeout ne s'exécute qu'une fois. Et l'opacité se modifie une seule fois et on ne la vois pas.

http://www.w3schools.com/jsref/met_win_settimeout.asp

Merci pour ta colle niveau 2 qui nous a bien eu et on attends la prochaine pour une nouvelle tentative :-)

Bonne journée

Binary Lost

26 octobre 2016 à 8:51:31

Ouais sauf que si tu regarde bien le cours il le fait avec setTimeout et quand tu clique sur son lien d'exemple cela fonctionne parfaitement avec setTimeout, c'est pour cela que j'ai ouvert ce topic vu que chez moi ce qu'il fait ne marche pas.

-
Edité par Binary Lost 26 octobre 2016 à 8:51:58