11521 sujets

JavaScript, DOM et API Web HTML5

Question : FadeIn

Bonsoir,

Je viens vers vous car je n'ai pas trouvé de solution au problème suivant.
J'ai récupéré un script de Javascript ici qui me permet de faire un effet de FadeIn et de FadeOut lorsqu'un changement de page html se fait.

Voici mes 2 questions :

1 - Si je ne veux garder que l'effet de "FadeIn", il me suffit juste de retirer ce morceau de code-là ?
$('...').fadeOut(1000, newpage);



2 - Imaginons que je puisse accéder à ma page "Contact.html" via différentes balises <a href=...> </a> dans mon site web. Comment faire pour que l'effet de "FadeIn" ne se fasse que si j'y accède depuis un seul endroit, et non pas les autres ?

Je ne sais pas si j'ai été assez clair dans la formulation du problème. Si ce n'est pas le cas, dîtes le moi et j'essaierai de donner un meilleur exemple. Merci d'avance pour votre aide.

Ha, et voici le code bien sûr :

					<!-- Appelle du script de base jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- Application de l'effet -->
<script type="text/javascript">
$(document).ready(function() {

    // effet fondu en entrée à l'ouverture de la page
    $('#contact').fadeIn(1000);

    // effet fondu en sortie de la page entière par un clique sur un bouton
    $('').click(function(event) {
    event.preventDefault();
    newLocation = this.href;
    $('...').fadeOut(1000, newpage);
    });
    function newpage() {
    window.location = newLocation;
    }
});
</script>

Modifié par flox (30 Oct 2016 - 20:34)
Bonjour,
Pour ta question 1, effectivement tu peux retirés l'application du fadeout, voire la totalité de ta fonction qui gère les évènements : 
$('').click(function(event) {
    event.preventDefault();
    newLocation = this.href;
    $('...').fadeOut(1000, newpage);
    });


Pour ta 2ème question, il y a la fonction document.referrer qui permet de connaitre la page appellante.
Foolcrow a écrit :
Bonjour,
Pour ta question 1, effectivement tu peux retirés l'application du fadeout, voire la totalité de ta fonction qui gère les évènements : 
$('').click(function(event) {
    event.preventDefault();
    newLocation = this.href;
    $('...').fadeOut(1000, newpage);
    });


Pour ta 2ème question, il y a la fonction document.referrer qui permet de connaitre la page appellante.


Bonjour,

Merci pour ta réponse. Concernant l'utilisation de 'document.referrer', pourrait-tu développer davantage s'il te plaît ? J'ai vraiment peu de connaissance en JavaScript, mais je suis obligé de passer par là vu que le CSS ne me permet pas de faire cette transition en FadeIn Smiley confus
Bonsoir,
Je na connais pas trop le JQuery mais cela doit etre quelque chose comme cela :

dans ta fonction $(document).ready(function() avant le fadeIn tu récupères la page appelante par : 
var pageappelante =  document.referrer;


Ensuite reste à tester pour faire ou ne pas faire ton fadeIn.

En espérant t'avoir aidé.
Bonsoir Flox,
il y aurait bien une autre façon toute simple de procéder en css3 et javascript, sans jQuery. Ca tiendrait en 3 ou 4 lignes de script. Exemple :
http://sentrais.eu/test-fade-transition/page1.html

Je te laisse comprendre les éléments de code qui puissent t'intéresser dans l'exemple :
<!doctype html>

<html lang="fr">

<head>

<meta charset="utf-8" />

<title>Ma page 1</title>

<style>
body{font-family:verdana,arial,sans-serif;font-size:1.5em}

.opac_1{opacity:1;transition:opacity ease 1s}
.opac_0{opacity:0;transition:opacity ease 1s}

#global{display:block;padding:20px;background:#efd}
</style>

</head>

<body id="page1" class="opac_0">

<div id="global">
Page 1<br>
<a href="javascript:FadeAndGo('page2.html')">Page 2</a><br>
<a href="javascript:FadeAndGo('page3.html')">Page 3</a><br>
<a href="javascript:FadeAndGo('page4.html')">Page 4</a>
</div>

<script>
var page1=document.getElementById("page1");
		
//Fonction appelée au moment de quitter la page pour ouvrir une autre page :
function FadeAndGo(target)
{
page1.className="opac_0";
setTimeout(function(){location.href=target},1000);
}

//Fonction appelée au moment d'ouvrir la page :
function FadeIn()
{
page1.className="opac_1";
}

//Après chargement de la page on appelle la fonction FadeIn() :
window.onload=FadeIn;
</script>

</body>

</html>
où
<body id="page1" class="opac_0">
passe en class="opac_1" avec transition sur l'opacity, puis inversement ...

Donc : l'event onload et les 2 class successifs du body t'intéresseront ... qui valent bien fadeIn et fadeOut d'avec jQuery. Car sachons bien que CCS3 et bientôt ... CSS4 ont la vocation de supplanter à terme jQuery dont ils s'inspirent évidemment : alors faire simple ne peut pas être idiot avec un nav-web mis-à-jour en nov 2016.
Modifié par pictural (18 Nov 2016 - 02:21)
Sujet clos
Aller à