Déclenchement d'une animation au click

Version imprimable

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:

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

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:

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>

31/12/2010, 10h57
Arnaud F.

A noter que :

Code:

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

peut tout simplement s'écrire :

Code:

$("#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:

$("#contenu > p:first")

à

Code:

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

ou encore à :

Code:

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

My 2cts :)
31/12/2010, 11h15
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:

$("#contenu > p:first")

Ce code serra transformé en :

Code:

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

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

My 2cts ;)
31/12/2010, 11h43
Arnaud F.

Citation:

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:

$("#contenu > p:first")

Ce code serra transformé en :

Code:

$("#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 :D
31/12/2010, 12h02
danielhagnoul

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.

Citation:

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.
31/12/2010, 15h10
student_

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 ! ;)