Discussion :

[JohnSly]

Bonjour,

Ma question est la suivante :

Je souhaiterais utiliser le FadeOut et le SlideDown de jQuery lors d'un changement de page HTML classique (click sur un lien).

En effet, j'ai déjà un exemple pour changer le contenu d'un div, mais le souci étant que je souhaiterais, pour une question de référencement, que ce ne soit pas le contenu du div qui soit changé (site web avec le même url lors de la navigation) mais plutôt que la page cible soit appelée par un lien classique (url changeant en fonction de la page appelée).

Je dispose des fonctions suivantes :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
jQuery(document).ready(function(){
	hideContent = function(contentString){
		jQuery("div.dynamicContent").fadeOut( 1000 ,function() {
					showContent(contentString);playSound(0);
					});
	};
	showContent = function (contentString) {
		jQuery.ajax({
			   type: "GET",
			   url: contentString,
			   dataType:"html",
			   success: function(data){
			    jQuery("div.dynamicContent").html(data);
			 		jQuery("div.dynamicContent").slideDown(1000);
				},
			   error: function () {
			   		alert("Page "+contentString+" not found");
			   	}
 		}); 
	};

J'ai l'intime conviction qu'il y a un changement à faire dans la ligne :

Code :

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

 jQuery("div.dynamicContent").fadeOut( 1000 ,function() {

Car dynamicContent est l'id de mon div...

En bref je souhaiterais réaliser un site web classique mais avec un effet de FadeOut et SliceDown lors du changement des pages HTML.

Si vous savez comment faire ou si tout simplement ce n'est pas possible, j'attend vos réponses avec impatience!

Cordialement, JohnSly

Si jamais ce n'est pas possible, y aurait-il un équivalant en javascript du FadeOut et du SlideDown ?

Merci

[danielhagnoul]

Bonsoir.

Pour la div d'id :

Code :

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

$("#dynamicContent")

Vous voulez quitter une page web et en charger une autre avec effet de fadeOut sur la page que l'on quitte et un effet de fadeIn sur la nouvelle page ? Si c'est bien cela, il faut traiter chaque page séparément.

Page appelante, exemple avec clic sur un bouton :

Code :

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

<button id="btn">Go</button>

Code :

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

1
2
3
4
5
6
$("#btn").click(function(){
	// 5000 = 5s
	$("body").fadeOut(5000, function(){
		window.location.href = "efface12.html";
	});
});

Page appelée, body avec le CSS display none :

Code :

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

1
2
// 5s
$("body").fadeIn(5000);

[JohnSly]

Merci pour votre réponse.

C'est bien l'effet que je recherche car l'effet est effectué sur toute la page.

Par contre l'exemple est fait pour clic sur un bouton. Mais pour un clic sur un lien type <a href="page2.html"> je ne vois pas comment faire....

Est-ce que dans votre solution les <title> et les <meta> changent également ?
Car sinon une autre solution serait de jouer avec les onload et onunload sur body... Merci de m'éclairer car je suis un peu perdu.

[danielhagnoul]

Bonsoir.

1. Mais pour un clic sur un lien type <a href="page2.html"> je ne vois pas comment faire....
   
2. Est-ce que dans votre solution les <title> et les <meta> changent également ?
   
3. Merci de m'éclairer car je suis un peu perdu.

1. Code :

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

   <a id="btn" href="page2.html">

2. Il s'agit de deux pages web différentes, on quitte la première page avec un effet de fadeOut et la seconde page se dévoile progressivement avec un effet de fadeIn ! Deux pages différentes, donc tout est différent !
   
3. Idem ! Je ne sais plus trop ce que vous voulez réellement réaliser.

[JohnSly]

Bonsoir,

Grâce à vous j'ai réussi finalement à faire ce que je voulais. Voila le code pour ceux que ça intéresse :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
 
    $("#body_page_à_afficher").css({ display: "none" });
    $("#body_page_à_afficher").fadeIn(2000);
 
    $("#btn").click(function(){
 
        $("#body_page_à_masquer").fadeOut(2000, function(){
 
	    $(location).attr('href',"page_à_afficher.html");
	});
    });
});

Ceci fonctionne parfaitement avec un clic sur un bouton ou un objet flash ! (Merci encore)

Mais le problème survient avec l'usage du fameux lien.
En fait je veux faire un lien sur un objet flash comme ceci :

Code :

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

<a id="link" href="page_à_afficher"> <mon_objet_flash> </a>

Je veux faire ce lien principalement pour que le GoogleBot puisse lire mes pages à travers ce lien car (arrêtez moi si je me trompe) le GoogleBot est incappable de lire le javascript donc incapable de comprendre la ligne (que j'ai changée au passage. Je ne sais pas si c'est mieu ou pas...) :

Code :

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

$(location).attr('href',"page_à_afficher.html");

J'ai donc testé ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
 
    $("#body_page_à_afficher").css({ display: "none" });
    $("#body_page_à_afficher").fadeIn(2000);
 
    $("#link").click(function(){
 
        $("#body2").fadeOut(2000);
    });
});

Et là, le fadeOut est ignoré... car, à mon avis, le click en jQuery doit être exécuté après donc inutile...

J'ai recherché sur le net des solutions et je crois bel et bien que ce que je veux faire n'est pas possible. Mais bon, la solution pourrait être de faire un plan du site (et je crois que je vais faire ça) pour le GoogleBot car je veux être référencé. Cette question ne se poserait pas si j'utilisai un menu classique en html mais bon... Design oblige !

Si jamais vous trouvez une solution, merci de m'en faire part !
Sinon, vous en avez déjà fait beaucoup. Merci