Comment ajouter une transition de page en quittant la page avec jQuery

Question

J'essaie d'ajouter une transition vers un site où la page devient noire lorsqu'un utilisateur navigue sur le site.

J'ai décidé que la meilleure façon d'y parvenir était de créer un div qui masquerait la page dans le noir et l'animerait ensuite avec jQuery.

Jusqu'à présent, j'ai réussi à créer le code pour le « fondu au noir » effet ...

$(document).ready(function(){ 
    // Insert mask after container 
    $('.container').after('<div class="mask"></div>'); 
    // Delay the fadeOut effect for half a second so you can actually see it 
    $('.mask').animate({opacity: 1.0}, 500) 
    // Slowly make the mask dissapear 
    .fadeOut('slow'); 
}); 

Mais je ne suis pas sûr de savoir comment obtenir la page « fade du noir » quand l'utilisateur clique sur une autre partie du site. Je comprends que je devrais utiliser la fonction click, mais comment retarder le chargement de la page à temps pour pouvoir voir l'animation "fade to black"?

Un grand merci pour votre temps.

Answer 1

Vous pouvez lier à l'événement click() et le renvoyer false, empêchant ainsi l'action par défaut (la page accédant à href du lien). Vous pouvez ensuite lier un rappel à la méthode fadeIn() qui définit l'emplacement du document sur la référence hypertexte du lien.

Vous pouvez faire quelque chose comme ceci:

$('a').click(function(){ 
    var url = $(this).attr('href'); 

    $('.mask').fadeIn('slow', function(){ 
    document.location.href = url; 
    }); 

    return false; 
}); 

Merci! Jamie

Answer 2

Capturez l'événement click et éviter le comportement par défaut de se produire:

$('a').click(function(event) { 
    event.preventDefault(); 

    // mask effect code here 
}); 

Le event.preventDefault() est semblable à l'aide d'un onclick='function(); return false;' JavaScript non jQuery.