Fade in à l'ouverture et fade out à la fermeture

Version imprimable

Bonjour,

J'aurais besoin d'un coup de main pour mettre en place un petit effet fadein fadeout sur mon site. Il est constitué d'un bandeau titre et d'une colonne menu fixe, et le contenu est généré en php selon l'argument passé dans l'url.

Lors d'un changement de page, je voudrais que ce contenu disparaisse avec un effet de fade out et que le contenu de la page suivante chargée apparaisse en fade in mais je rencontre quelques difficultés.

Je ne suis pas très doué en javascript donc j'ai utilisé des scripts tout faits mais sans succès, puis j'ai tenté d'utiliser les fonction fadeIn() et fadeOut() de jQuery mais je ne suis pas sûr de savoir sur quel événement déclencher ces fonctions.

Voici mon code dans l'état actuel des choses :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $("#contenu").load(function(){ $("#contenu").fadeIn(1000); }); $("#contenu").unload(function(){ $("#contenu").fadeOut(1000); }); </script>
Merci pour votre aide !

01/10/2010, 10h57
SpaceFrog

cela fonctionne bien à condition que l'element soit initialisé en display none

ne pas oublier de mettre une balise noscript pour remetre le style à display block sinon lorsque javascript est desactivé les site n'esrt pas visible
01/10/2010, 13h26
Bovino
Citation:

Envoyé par SpaceFrog

cela fonctionne bien à condition que l'element soit initialisé en display none

ne pas oublier de mettre une balise noscript pour remetre le style à display block sinon lorsque javascript est desactivé les site n'esrt pas visible

Pas tout à fait, dans ce contexte, load concerne l'événement onload, or à moins que son contenu soit une image, un élément HTML ne possède en général pas d'événement onload (pas plus que onunload du reste).

Il serait donc préférable de faire :
Code:

1 2 3 4 5 6 $.ready(function(){ $("#contenu").fadeIn(1000); $(window).unload(function() { $("#contenu").fadeOut(1000); }); })
02/10/2010, 14h50
shlavos
Merci à tous les deux pour vos réponses,

@Spacefrog : le div est bien initialisé en display none
@bovino : j'ai remplacé mon bout de code par le tien (placé entre les balises <head>)

Mais ça ne fonctionne pas :(

J'ai essayé sur Chrome et Firefox, le div #contenu ne s'affiche pas. Lorsque j'enlève le display none, le div s'affiche bien mais il n'y a aucun effet de transition...

Quelqu'un a une idée ? Sinon je suis preneur de solutions différentes sans la lib jQuery...

Merci

edit : Je sens que je touche au but.

Voici deux versions du code et ce qui se produit dans chaque cas :

Celle-ci est une version de test
Code:

1 2 3 4 5 6 7 8 9 <script> $(window).ready(function(){ fade("photo_intro");}) $(window).click(function() { fade("photo_intro");}) </script>
Au chargement, "photo_intro" apprait bien en fade in.
Lorsque je clique dessus, "photo_intro" disparait en fade out

fade() est un script qui mesure l'opacité du div, c'est donc une fonction deux en un.

Maintenant deuxième version du code (la vraie) :
Code:

1 2 3 4 5 6 7 8 9 <script> $(window).ready(function(){ fade("photo_intro");}) $(window).unload(function() { fade("photo_intro");}) </script>
Cette fois le fade in est ok, mais le fade out n'a pas lieu en sortie de page... Je ne comprends pas pourquoi, car en glissant une alert(), je constate bien que l'événement unload de window est bien intercépté

Help !