animer un titre

Version imprimable

17/01/2012, 22h06
Dordubre

animer un titre

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

Code:

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

Merci d'avance, soyez indulgent ! :ccool:
18/01/2012, 08h12
Bovino

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

Code:

$(document).ready(function() { $('h6').animate({top:'100px'});});
18/01/2012, 09h53
Dordubre

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

Code:

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

Ne fonctionne pas ?

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:

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:

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éé

18/01/2012, 11h14
Dordubre

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:

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

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

EDIT :

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

18/01/2012, 11h31
Dordubre

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

Merci !:ccool: