animer un titre

Dordubre · 17/01/2012, 22h06

Bonsoir, je cherche à animer un titre, rien de plus simple et ce code ne fonctionne pas...

Code :

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

$('h6').ready(function() { $('h6').animate({top:'100px'});});

Merci d'avance, soyez indulgent !

Bovino · 18/01/2012, 08h12

Indulgent je veux bien, mais la première chose que tu pourrais faire serait de lire un minimum de documentation sur l'événement ready() : Qu'est-ce que la notion de Ready ?

Code :

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

$(document).ready(function() { $('h6').animate({top:'100px'});});

Dordubre · 18/01/2012, 09h53

D'accord... mais pourquoi ce simple code :

Code :

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

$('h6').animate({top :'100px'});

Ne fonctionne pas ?

SpaceFrog · 18/01/2012, 10h08

Par ce que tout ce qui est en dehors du ready est interprété avant que la page n'ait fini de chargé, donc il y a de grandes chance que lorsque la ligne est interprétée, ton ou test balises $.('h6') ne soient pas instanciées (n'existent pas)

Un petit exemple pour illustrer:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<script type='text/javascript'>
alert( $('#test').attr('id') )
 $(document).ready(function(){
alert( $('#test').attr('id') )	
 
})
 </script>
</head>
<body>
<div id="test"></div>
</body>
</html>

la première ligne de code retourne undefined, puisque lorsqu'elle est interprétée (flux de la page) le div n'est pas encore créé :
la seconde retourne bien l'id puisque declarée dans le document.ready, elle en sera interprétée qu'après instanciation de tous les objets de la page (en différé)

Ceci fonctionne également :

Code :

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

1
2
3
4
<div id="test"></div>
<script type='text/javascript'>
alert( $('#test').attr('id') )
</script>

Puisque le code est interprété après que le div ait été créé

Dordubre · 18/01/2012, 11h14

Ok j'ai bien compris mais quelle erreur j'ai faite avec mon 1er code ? ready vérifie que la page est bien chargée, ensuite je lance le animate sur le h6. Vous vous contredisez ou je ne comprend pas ?

Si j'utilise un slideToggle ça fonctionne impec' pourtant... :

Code :

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

<script type="text/javascript">$(document).ready(function(){$("h6").slideToggle()});

Bovino · 18/01/2012, 11h26

Pour animer la propriété top, il faut déjà que l'élément soit positionné... C'est le cas ?

EDIT :

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
<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
	</script>
	<style>
		h2{position: relative;}
	</style>
	<script>
		function anim1(){
			$('h1').animate({top :'100px'});
		}
		function anim2(){
			$('h2').animate({top :'100px'});
		}
	</script>
</head>
<body>
	<h1>Titre 1</h1>
	<h2>Titre 2</h2>
	<button onclick="anim1()">Animer h1</button>
	<button onclick="anim2()">Animer h2</button>
</body>
</html>

Dordubre · 18/01/2012, 11h31

Un position relative a regler le probleme ! Mais margin-top ne fonctionne pas avec animate ?

Merci !

17/01/2012, 22h06	#1
Dordubre Invité de passage Inscription : janvier 2012 Messages : 15 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2012 Messages : 15 Points : 1 Points : 1	animer un titre Bonsoir, je cherche à animer un titre, rien de plus simple et ce code ne fonctionne pas... Code : Sélectionner tout - Visualiser dans une fenêtre à part $('h6').ready(function() { $('h6').animate({top:'100px'});}); Merci d'avance, soyez indulgent !
	00

18/01/2012, 08h12	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 787 Points : 35 787	Indulgent je veux bien, mais la première chose que tu pourrais faire serait de lire un minimum de documentation sur l'événement ready() : Qu'est-ce que la notion de Ready ? Code : Sélectionner tout - Visualiser dans une fenêtre à part $(document).ready(function() { $('h6').animate({top:'100px'});}); __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

18/01/2012, 09h53	#3
Dordubre Invité de passage Inscription : janvier 2012 Messages : 15 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2012 Messages : 15 Points : 1 Points : 1	D'accord... mais pourquoi ce simple code : Code : Sélectionner tout - Visualiser dans une fenêtre à part $('h6').animate({top :'100px'}); Ne fonctionne pas ?
	00

18/01/2012, 11h14	#5
Dordubre Invité de passage Inscription : janvier 2012 Messages : 15 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2012 Messages : 15 Points : 1 Points : 1	Ok j'ai bien compris mais quelle erreur j'ai faite avec mon 1er code ? ready vérifie que la page est bien chargée, ensuite je lance le animate sur le h6. Vous vous contredisez ou je ne comprend pas ? Si j'utilise un slideToggle ça fonctionne impec' pourtant... : Code : Sélectionner tout - Visualiser dans une fenêtre à part <script type="text/javascript">$(document).ready(function(){$("h6").slideToggle()});
	00

18/01/2012, 11h31	#7
Dordubre Invité de passage Inscription : janvier 2012 Messages : 15 Détails du profil Informations personnelles : Sexe : Localisation : France Informations forums : Inscription : janvier 2012 Messages : 15 Points : 1 Points : 1	Un position relative a regler le probleme ! Mais margin-top ne fonctionne pas avec animate ? Merci !
	00

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