Fonction de rotation

Le proble;e ?

Sujet résolu

11 mai 2012 à 22:55:27

Bonjour,
Je vous contacte car j'ai un probleme sur lequel je bloque depuis 2h...

Le but est de faire simplement :
- Au survol : ca tourne
- Sinon : place initiale.

Je ne suis pas expert javascript, mes avec mes petites connaissances je suis arrivé a:

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Une div se promène.</title>
		<meta charset="UTF-8">
		<style type="text/css">
		#conteneur
		{
			width: 155px;
			height: 130px;
			position: relative;
			margin: auto;
			background-color: #000;
		}

		#moveDiv
		{
			width: 23px;
			height: 19px;
			position: absolute;
			top: 10px;
			left: 10px;
			background-color: #fff;
			transition: left 4s linear, top 5s linear;
			-moz-transition: left 4s linear, top 5s linear;
			-webkit-transition: left 4s linear, top 5s linear;
			-o-transition: left 4s linear, top 5s linear;
		}
		</style>
		<script type="text/javascript">
			function anim (bool)
			{
				i=0;
				setInterval(function(){
					i+= bool;
					document.getElementById('moveDiv').style.MozTransform = 'rotate(' + i + 'deg)';
				}, 10);
			};
		</script>
	</head>
	<body>
		<div id="conteneur" onMouseOver="anim(10)" onMouseOut='anim(0)'>
			<div style="left: 10px; top: 101px;" id="moveDiv"></div>
		</div>
	</body>
</html>

Le probleme c'est que mon code marche au premier survol, mais quand on repasse sur le conteneur tout bug... De quoi se faire mal au crane...

Je vous remerci d'avance pour l'aide.
Arguss

restimel

11 mai 2012 à 23:31:11

Ton problème vient du fait que setInterval ne s'arrête jamais.
Du coup lors du deuxième passage tu as deux setInterval qui tournent en même temps !

Tu devrais arrêter le setInterval dès qu'il ne devrait plus être utilisé (par exemple dès que tu passes bool à 0).
Pour cela tu peux utiliser clearInterval(timer) où timer est la valeur retournée par ton setInterval.

hpourh

11 mai 2012 à 23:32:57

Salut,
Pour fermer un setInterval(), on utilise la fonction clearInterval(), j'utilise donc ici une variable commune à toutes les fonctions js et lorsque la souris sort : on utilise la fonction... Vois plutôt...

Ça marche, j'ai testé.

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<title>Une div se promene.</title>
		<meta charset="UTF-8">
		<style type="text/css">
		#conteneur
		{
			width: 155px;
			height: 130px;
			position: relative;
			margin: auto;
			background-color: #000;
		}

		#moveDiv
		{
			width: 23px;
			height: 19px;
			position: absolute;
			top: 10px;
			left: 10px;
			background-color: #fff;
			transition: left 4s linear, top 5s linear;
			-moz-transition: left 4s linear, top 5s linear;
			-webkit-transition: left 4s linear, top 5s linear;
			-o-transition: left 4s linear, top 5s linear;
		}
		</style>
		<script type="text/javascript">
			var time = NULL;//Variable commune pour fermer l'intervalle
			function anim (bool)//Fonction pour l'animation
			{
				i=0;
				time = setInterval(function(){
					i+= bool;
					document.getElementById('moveDiv').style.MozTransform = 'rotate(' + i + 'deg)';
				}, 10);
			}
			function stop()//fonction pour l'arrêter
			{
				clearInterval(time);
				document.getElementById('moveDiv').style.MozTransform = 'rotate(0deg)';
			}
		</script>
	</head>
	<body>
		<div id="conteneur" onMouseOver="anim(10)" onMouseOut='stop()'>
			<div style="left: 10px; top: 101px;" id="moveDiv"></div>
		</div>
	</body>
</html>

Golmote

12 mai 2012 à 21:51:49

@hpourh: Tu aurais pu ouvrir une console d'erreur en testant ton code.
Un code qui marche, c'est bien. Un code qui ne génère pas d'erreurs, c'est mieux.

En JS, on écrit null en minuscules.

arguss

14 mai 2012 à 16:46:13

Ah génial Merci beaucoup (par contre en effet pour le coup c'est une erreur assez débutante...)
Encore Thank a vous tous =D