Déclenchement d'une animation au click [Résolu]

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

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 :

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.

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.

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 !

31/12/2010, 10h57	#3
Arnaud F. Rédacteur Arnaud Feltz Développeur .NET Inscription : août 2005 Messages : 5 204 Détails du profil Informations personnelles : Nom : Arnaud Feltz Âge : 25 Localisation : France Informations professionnelles : Activité : Développeur .NET Secteur : Transports Informations forums : Inscription : août 2005 Messages : 5 204 Points : 6 113 Points : 6 113	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 __________________ C'est par l'adresse que vaut le bûcheron, bien plus que par la force. Homère Installation de Code::Blocks sous Debian à partir de Nightly Builds
	00

31/12/2010, 11h15	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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 __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

31/12/2010, 15h10	#7
student_ Futur Membre du Club Inscription : novembre 2009 Messages : 77 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 77 Points : 19 Points : 19	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 !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email