Bonjour,

Je travaille actuellement sur mon site web perso, et j'aimerais avoir un effet de fade out entre les pages.

J'ai réussi a créer l'effet en jquery

$(function() {
$(".fade-out").click(function() {
$('body').fadeOut(1500);
});
});

Cependant le lien se charge avant l'animation du coup il y a un conflit.

Est que quelqu'un sait comment faire pour attendre que l'animation se joue pour ensuite charger la page appelée.

Merci beaucoup.

(vous pouvez voir l'effet sur mon site http://www.antonycaron.me j'ai volontairement désactier le lien pour vous montrer)

3 réponses


Natà
Réponse acceptée

Salut, je n'ai pas testé mais moi je ferais quelque chose comme ça :

$(function() {
    $(".fade-out").click(function() {
        $('body').fadeOut(1500,function(){
            window.location='mapage.html';
        });
    return false;
    });
});

EDIT :
Non, ça ne marche pas :D

En revanche ça ça marche (testé :p )

<a href="help" class="fade-out">link</a>
<script type="text/javascript">
    $("a").click(function() {
        var url = $(this).attr('href');
        $('body').fadeOut(1500,function(){
            $(location).attr('href',url);
        });
    return false;
    });
</script>
Maenhyr
Réponse acceptée

Ton système repose sur le principe d'ajax afin de faire croire que l'on navigue sur une seule page et que les éléments se chargent d'eux même. Tu risques d'avoir un soucis de fluidité au niveau de l'affichage. La réponse de Natà fonctionne effectivement mais si la page à charger est lourde en ressources, tu auras un blanc et un affichage tardif.

La solution ne serait elle pas de faire une navigation ajax ? Il te faut récupérer la page en AJAX, la charger dans ton body et mettre à jour l'url via JavaScript afin de permettre à l'utilisateur de cliquer sur l'icone rafraichir. Cette solution à l'avantage de ne lancer l'animation qu'une fois que tu auras la page stockée côté client et offrira donc une navigation entre pages très fluide. Par ailleurs c'est plus simple à implémenter que ça a l'air.

Merci a tous les deux, pour le moment je vais opter pour la technique en jquery car je connais déjà très peu ce language et je ne connais pas du tous l'ajax, cependant je me pencherai plus amplement sur l'ajax plus tard.