animer un titre

**Dordubre** · 17/01/2012, 23h06

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, 09h12

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, 10h53

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, 11h08

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, 12h14

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, 12h26

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>

animer un titre

jQuery

Vue hybride

Discussions similaires

Partager

Partager