Fade out lorsque l'on quitte la page

19 août 2008, 15:50

Bonjour,

Je tente de mettre en place (avec JQuery) un système de fade out et fade in comme transition entre les pages.

Je n'ai pas de problème pour le fade in, associé à l'évènement onLoad du body, par contre je ne vois pas comment faire le fadeOut lorsque l'on quitte la page, sachant que sur le onUnload ca ne marche pas...

Y a t il une solution ? (a part le flash

)

Merci.

19 août 2008, 16:12

Faire un fade in + un fade out ça va faire beaucoup pour l'utilisateur -> attendre que sa page fasse le fade out, puis à nouveau un fade in...
Perso je ferais qu'un fade in l(ors d'un clic sur un lien vers une autre page ) de la nouvelle page.

19 août 2008, 16:28

En fait c pas un fade in - out de toute la page, c juste un bloc (mais bon le probleme est le meme) et c pas forcement long et c surtout moins abrupte... le fade in seul est moins fluide à mon gout, mais bon apres si j arrive à le faire et que c trop long je changerai, je voudrai déjà voir ce que ca donne

19 août 2008, 16:34

Ok

Bah en Jquery je sais pas trop, mais peut être que l'effet du multibox de mootools pourrait te convenir.

Démo ici

19 août 2008, 16:48

Ben au lieu de lancer l'effet sur le onUnload qui ne fonctionne pas, pourquoi ne pas le lancer sur le onclick ou assimilé du lien concerné?

19 août 2008, 17:08

Ben au lieu de lancer l'effet sur le onUnload qui ne fonctionne pas, pourquoi ne pas le lancer sur le onclick ou assimilé du lien concerné?

En effet... Sauf que si je le fais sur un <a normal l'effet ne se produit pas car on quitte la page. Sinon il faudrait que je fasse que des liens avec des window.location mais ca m embete un peu au niveau accessibilité... Que le fade-in fade-out ne soit pas visible pour ceux par exemple dont le js est désactivé ca m est égal, par contre que les liens marchent pas....

oui je sais je suis un peu chi....

19 août 2008, 17:27

Sauf si ta balise <a> a href=#, elle lance ton script de fade out et en mettant un champ hidden avec (ou un id) qui contient une référence pour le lien souhaité, tu fais un petit traitement et une redirection sur ce lien avec un timer = au temps de ton effet..

Mais là c'est bricole-land..

17 sept. 2008, 02:13

J'avais le même problème.

Avec Jquery utiliser

$(window).bind('beforeunload', function (event) {
alert('HELLO');
})

Ça fonctionne au poil

17 sept. 2008, 10:05

Merci.

Effectivement cela fonctionne pour un alert mais pas pour un fadeOut qui prend surement trop de temps... Enfin c'est pas grave je ferai sans.

Merci quand même à tous

Fade out lorsque l'on quitte la page

Qui est en ligne