[Résolu] Decalage avec un double animate jquery - Tremblement léger lors de deux animate jquery par jose_in_da_house - page 1

Bonjour,

Je débute en javascript et en jquery et j'ai décidé de réaliser un slide pour faire un espèce de menu intéractif.

Mon problème est le suivant, mon animation marche comme je le souhaite mais sur le côté droit de l'animation qui passe d'une div à l'autre, il y a un tremblement, un décalage entre l'agrandissement de la div et la réduction de l'autre.

Si vous avez une idée, ça serait sympa.

Code HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="getElementsByClassName-1.0.1.js"></script>
		<script type="text/javascript" src="scripts.js"></script>
		<title>
			Test
		</title>
	</head>
	<body>
		<div id="divSlider">
			<div id="test1" class="slider"></div>
			<div id="test2" class="slider"></div>
			<div id="test3" class="slider"></div>
			<div id="test4" class="slider"></div>
			<div id="test5" class="slider"></div>
		</div>
	</body>
</html>

Code CSS :

body {
	width: 960px;
	margin:auto;
}

#divSlider {
	width:900px;
	position:fixed;
	background-color : purple;
}

#test1 {
	background-color : blue;
	height:400px;
	width:700px;
	float:left;
}

#test2 {
	background-color : green;
	height:400px;
	width:50px;
	float:left;
}

#test3 {
	background-color : yellow;
	height:400px;
	width:50px;
	float:left;
}

#test4 {
	background-color : red;
	height:400px;
	width:50px;
	float:left;
}

#test5 {
	background-color : black;
	height:400px;
	width:50px;
	float:left;
}

Et le plus important le code Javascript :

// Fonctions jquery

$(document).ready(function() {
		$(".slider").click(function () {
		var idToGo = $(this).attr("id");
		if (document.getElementById(idToGo).className == "slider") {
			var divsClassName = getElementsByClassName("slider");
			for(var i = 0; i < divsClassName.length; i++) {  
				if (divsClassName[i].offsetWidth == "700") {
					var idToStop = divsClassName[i].id;
					document.getElementById(idToStop).className = "slider";
				}
	  	}
	  	if (idToStop != "" && idToGo != "") {
		  	$("#" + idToStop).animate({ 
			    width: "50px",
			  	}, 200
		  	);
			 	$("#" + idToGo).animate({ 
			    width: "700px",
			  	}, 200
		  	);
	  	}
	  	document.getElementById(idToGo).className += " stop";
  	}
	});
})

J'espère que c'est pas trop "barbare" et que vous pourrez m'aider.

Merci d'avance,

José<code type="css"></code>

Pour commencer, codons proprement.

Je ne vois pas pourquoi tu utilises un script de getElementsByClassName() alors que jQuery gère très bien les sélecteurs grâce à Sizzle.

Tu code devrait devenir quelque chose dans ce goût là :

$(document).ready(function() {
      // On stocke dans une variable le div actuellement ouvert
      var opened = $('#test1');
      
      // Lors du clic
      $(".slider").click(function () {
        // Si on a cliqué sur le div ouvert, on ne fait rien.
        if($(this).attr('id')===opened.attr('id')) { return false; }
        // Sinon on referme le div actuellement ouvert
        opened.animate({ 
          width: "50px",
          }, 200
        );
        // Et on ouvre le div clické
        $(this).animate({ 
          width: "700px",
          }, 200
        );
        // On met à jour la variable opened.
        opened = $(this);
      });
    })

Decalage avec un double animate jquery

Tremblement léger lors de deux animate jquery

Decalage avec un double animate jquery

Supprimer

Modérer

Signaler le message aux modérateurs