FadeIn et fadeOut
Fushiida
Messages postés
43
Statut
Membre
-
vincent170186 Messages postés 329 Statut Membre -
vincent170186 Messages postés 329 Statut Membre -
Bonjour,
Alors voila j'ai crée une page,
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').fadeIn(1500);
});
</script>
</code>
quand j'ouvre la page la page s'ouvre bien progressivement, mais j'aimerai que quand je change de page la page s'nleve progressivement pour faire apparaitre la suivante.
Merci d'avance pour vos reponce
Alors voila j'ai crée une page,
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').fadeIn(1500);
});
</script>
</code>
quand j'ouvre la page la page s'ouvre bien progressivement, mais j'aimerai que quand je change de page la page s'nleve progressivement pour faire apparaitre la suivante.
Merci d'avance pour vos reponce
7 réponses
Hello,
Je ne connais pas ces fonction, mais j'imagine qu'il faut que tu commences par appeler "fadeOut" et quand la fonction a fini de faire disparaître ta page, tu fais un window.location='<URL de la nouvelle page>'; et hop :)
Je ne connais pas ces fonction, mais j'imagine qu'il faut que tu commences par appeler "fadeOut" et quand la fonction a fini de faire disparaître ta page, tu fais un window.location='<URL de la nouvelle page>'; et hop :)
Salut,
si j'ai bien compris tu veux qu'en changeant de page, ta fenetre disparaisse,
si c'est en changeant reelement de page (en changeant d'url ,et non pas en appelant du contenue en ajax , ou du texte caché via une ancre)
t upeux utiliser (comme a premiére vu tu utilise jquery).
.unload()
--> https://api.jquery.com/unload/
mais ça ne vas pas fonctionner sur tout les navigateurs. certaind te charge la page et ignore ce qu'il y'a dans le unload.
sinon comme l'as dit Mihawk , tu passe par une redirection en js.
mais ça veut dire que tout tes liens doivent etre remplacé.
après si tu veux garder tes liens ,pour le ref nat c'est mieux d'avoir des liens sur sa page ! (et puis pour ce qui desactive javascript bien que je me demande ce que ça represente les nombre d'internaute qui desactive le JS ! enfin bref );
tu peux faire une fonction qui au dom ready remplace les src de tes liens (mais ça vas prendre la ressources, ça peut aussi etre considéré comme du black SEO , méme si ça n'en n'est pas !) et au click tu redirige en js vers la page voulue (en enlevant le #).
ça donnerait un truc du genre:
$(document).ready(function()
{
$("#a").each(function(){
url="#"+$(this).attr("src");
$(this).attr("src", url);
});
$("#a").click(function(){
$('#picOne').fadeOut('slow', function() {
url_redirct=$(this).attr("src").split('#')[1];
window.location= url_redirct';
});
});
});
voila !
si j'ai bien compris tu veux qu'en changeant de page, ta fenetre disparaisse,
si c'est en changeant reelement de page (en changeant d'url ,et non pas en appelant du contenue en ajax , ou du texte caché via une ancre)
t upeux utiliser (comme a premiére vu tu utilise jquery).
.unload()
--> https://api.jquery.com/unload/
mais ça ne vas pas fonctionner sur tout les navigateurs. certaind te charge la page et ignore ce qu'il y'a dans le unload.
sinon comme l'as dit Mihawk , tu passe par une redirection en js.
mais ça veut dire que tout tes liens doivent etre remplacé.
après si tu veux garder tes liens ,pour le ref nat c'est mieux d'avoir des liens sur sa page ! (et puis pour ce qui desactive javascript bien que je me demande ce que ça represente les nombre d'internaute qui desactive le JS ! enfin bref );
tu peux faire une fonction qui au dom ready remplace les src de tes liens (mais ça vas prendre la ressources, ça peut aussi etre considéré comme du black SEO , méme si ça n'en n'est pas !) et au click tu redirige en js vers la page voulue (en enlevant le #).
ça donnerait un truc du genre:
$(document).ready(function()
{
$("#a").each(function(){
url="#"+$(this).attr("src");
$(this).attr("src", url);
});
$("#a").click(function(){
$('#picOne').fadeOut('slow', function() {
url_redirct=$(this).attr("src").split('#')[1];
window.location= url_redirct';
});
});
});
voila !
Tout d'abord merci de vos réponce, problème la page ne s'affiche plous, script utiliser
$(document).ready(function()
{
$("#a").each(function(){
url="#"+$(this).attr("src");
$(this).attr("href", url);
});
$("#a").click(function(){
$('#test').fadeOut('slow', function() {
url_redirct=$(this).attr("href").split('#')[1];
window.location= url_redirct';
});
});
});
salut,
je crois que facon la plus simple de faire est de mettre un background blanc au premier plan avec au debut une opacité nulle , et lorsque tu voudras decharger la page tu augmente petit à petit son opacité à 1.
je crois que facon la plus simple de faire est de mettre un background blanc au premier plan avec au debut une opacité nulle , et lorsque tu voudras decharger la page tu augmente petit à petit son opacité à 1.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Re !
petite modif
$(document).ready(function()
{
$("a").each(function(){
url="#"+$(this).attr("href");
$(this).attr("href", url);
});
$("a").click(function(){
redirect=$(this).attr("href").split('#')[1]
$('#test').fadeOut('slow', function() {
window.location= redirect;
});
});
});
tester de mon coté ça fonctionne !
petite modif
$(document).ready(function()
{
$("a").each(function(){
url="#"+$(this).attr("href");
$(this).attr("href", url);
});
$("a").click(function(){
redirect=$(this).attr("href").split('#')[1]
$('#test').fadeOut('slow', function() {
window.location= redirect;
});
});
});
tester de mon coté ça fonctionne !
ps : j'ai mis $('#test') car sur l'exemple au dessus tu as mis $('#test') mais si tu n'as pas d'element avec l'id test dans ta page le fade out ne se feras pas , et du coups la redirection non plus .
pour les correction j'ai remplacé les #a par a (car on cible les balise <a> et non pas l'élément avec l'id a --> au passe ça serai très con de mettre une each pour une sélection par id....)
et j'ai dégagé un simple quote qui trainé derrière url redirect, j'ai aussi déplacé ($(this).attr("href").split('#')[1] ) car si je le mets après le fade out le focus de fait sur l'élément fade outé (oui je sais que ce mots n'existe pas ! mais on se comprend ;) ) et du coups il cherché l'attribut href de #test et non pas du lien.
voila !
pour les correction j'ai remplacé les #a par a (car on cible les balise <a> et non pas l'élément avec l'id a --> au passe ça serai très con de mettre une each pour une sélection par id....)
et j'ai dégagé un simple quote qui trainé derrière url redirect, j'ai aussi déplacé ($(this).attr("href").split('#')[1] ) car si je le mets après le fade out le focus de fait sur l'élément fade outé (oui je sais que ce mots n'existe pas ! mais on se comprend ;) ) et du coups il cherché l'attribut href de #test et non pas du lien.
voila !
