Déclenchement d'une animation au click

**student_php** · 30/12/2010, 14h37

Bonjour,

J'aimerais faire un test, lancer une animation basique au clique, je me suis donc crée un petit script (je veux simplement modifier la largeur d'un paragraphe pour le moment), mais lorsque je clique, rien ne se passe, voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="contenu">
     <p>TEST</p>
 
     <button id="anim_launch">Animation 1</button>
 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript">
			$("#contenu").children("#anim_launch").click(function(){ 
			  $("#contenu").children("p") 
				.css("width","400px") 
				.animate({ 
				  width : "600px" 
				}); 
			}); 
     </script>
</div>

J'insère la feuille de style dans mon header, je ne vois pas ce qui pourrait bloquer le déclenchement de l'animation

**danielhagnoul** · 31/12/2010, 10h52

Bonjour

Appel de jQuery et code JS doivent se trouver dans le head ou mieux (performance) juste avant le </body>. Un id doit être unique dans la page, c'est donc un sélecteur jQuery de première classe et autosuffisant.

Je vous engage à prendre le code de l'exemple comme base de travail pour vos prochains tests sur jQuery.

Exemple, lire les commentaires du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		p.test {
			width:200px;
			height:200px;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
 
<div id="contenu">
	<p class="test">TEST</p>
	<button id="anim_launch">Animation 1</button>
</div>
 
 	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
$("#anim_launch").click(function(){
	/*
	 * Pour animer un élément du DOM il faut que
	 * cet élément ait reçu au préalable le même style
	 * ici width (on passe de 200px à 600px).
	 *
	 * Durée de l'animation 3000 millisecondes soit 3s
	 */
	$("#contenu").children("p").animate({"width" : "600px"}, 3000); 
});
 
		});
 	</script>
</body>  
</html>

**Arnaud F.** · 31/12/2010, 10h57

A noter que :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu").children("p")

peut tout simplement s'écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu > p")

[edit] et que du coup, pour ne sélectionner que le premier, ça devient super facile. Perso, je préfère lire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu > p:first")

à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu").children("p").first()

ou encore à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu").children("p")[0]

My 2cts

**danielhagnoul** · 31/12/2010, 11h15

Bonjour @Arnaud F.

Mais depuis jQuery 1.4.X (j'ai oublié la valeur du X et le lien de référence, mais je pense à 2), les sélecteurs complexes sont résolus en interne avant usage.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu > p:first")

Ce code serra transformé en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu").children("p").first()

Donc fausse bonne idée, car elle engendre une perte de performance.

My 2cts

**Arnaud F.** · 31/12/2010, 11h43

Envoyé par danielhagnoul

Bonjour @Arnaud F.

Mais depuis jQuery 1.4.X (j'ai oublié la valeur du X et le lien de référence, mais je pense à 2), les sélecteurs complexes sont résolus en interne avant usage.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu > p:first")

Ce code serra transformé en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#contenu").children("p").first()

Donc fausse bonne idée, car elle engendre une perte de performance.

My 2cts

C'est sur qu'il faut peser le pour et le contre, je dis pas, cependant, avec la puissance des PCs et la vitesse des moteurs JS actuels (or IE6 qui est censé être mort...), je pense qu'on peut se permettre ce genre de chose

C'est une écriture plus concise, plus lisible et je privilégie toujours la lisibilité quand je peux

C'est toujours le même débat entre perfs et lisibilité, faut trouver le juste milieu

**danielhagnoul** · 31/12/2010, 12h02

J'ai beaucoup utilisé cette écriture avant et il m'arrive encore de l'utiliser, mais maintenant je préfère résoudre le sélecteur plutôt que de laisser le soin à jQuery.

Envoyé par Arnaud F.

C'est une écriture plus concise, plus lisible et je privilégie toujours la lisibilité quand je peux

Plus concis : OUI !

Plus lisible, cela dépend du niveau en CSS et il y a des pièges, par exemple avec >

Plus performant, cela se discute pour un exemple simple, mais pour une page et un code complexe je ne pense pas.

**student_** · 31/12/2010, 15h10

Ok merci pour vos réponses !

Je vais effectivement garder cette base pour mes prochains tests et essayé de faire des animations un peu plus complexe !

Merci beaucoup pour l'aide, et bonne année !

Déclenchement d'une animation au click

jQuery

Discussions similaires

Partager

Partager