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

**shlavos** · 30/09/2010, 22h38

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 :

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

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 !

**SpaceFrog** · 01/10/2010, 10h57

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

**Bovino** · 01/10/2010, 13h26

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 :

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

1
2
3
4
5
6
$.ready(function(){
    $("#contenu").fadeIn(1000);
    $(window).unload(function() {
        $("#contenu").fadeOut(1000);
    });
})

**shlavos** · 02/10/2010, 14h50

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 :

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

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 :

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

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 !

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

jQuery

Discussions similaires

Partager

Partager