IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Lien hypertexte : une animation avant le transfert


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Homme Profil pro
    Inscrit en
    Juillet 2012
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juillet 2012
    Messages : 2
    Par défaut Lien hypertexte : une animation avant le transfert
    Bonsoir tout le monde,

    Je me permets de poster un message, car après plus de 5 heures de recherches, je n'ai pas trouvé de solution à mon problème.

    Je vous explique.

    J'ai un code jquery qui fonctionne (presque) parfaitement.

    J'ai un div avec des liens à l'intérieur, affichés via des li. Ce div est positionné de telle façon que l'on ne puisse voir qu'une partie de ce div pour afficher un texte du type "Cliquer ici pour plus de liens". Lorsqu'on clic sur ce texte, le div augmente en largeur, monte et affiche les liens. Si on clic à nouveau sur ce même texte l'animation est jouée dans l'autre sens.

    Cependant, si on clic sur un lien que compose ce div (Lien 1, Lien 2, etc...), l'animation ne se joue pas et le navigateur transfert automatiquement vers la dite page.

    Voici un lien pour mieux comprendre : http://jsfiddle.net/SLQHy/3/

    Je voudrai faire en sorte de bloquer le lien (le désactiver ?), jouer les animations, puis réactiver le lien et transférer le visiteur.

    J'ai essayé de cherché sur le net... mais personne ne semble avoir besoin de ce type de script.

    Une idée ?

    Si vous avez besoin de plus d'infos, n'hésitez pas !

    Merci d'avance pour votre aide.

    A+

  2. #2
    Membre chevronné
    Avatar de kalimukti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2011
    Messages
    262
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2011
    Messages : 262
    Par défaut
    Salut,
    Ce que je ferais dans les grandes lignes:
    Pour éviter que le navigateur ne lance le lien, tu as besoin d'un return false dans le gestionnaire du click.
    Dans ce gestionnaire en question, tu lances une animation. Le dernier paramètre de ton animation sera une fonction à lancer quand l'animation est complète (le "callback").
    exemples:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .animate( properties [, duration] [, easing] [, complete] )
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .slideUp( [duration] [, callback] )
    Dans cette fonction, tu rediriges le navigateur vers le lien.
    Ca devrait marcher comme ça...

  3. #3
    Candidat au Club
    Homme Profil pro
    Inscrit en
    Juillet 2012
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Juillet 2012
    Messages : 2
    Par défaut
    Merci pour cette réponse.

    J'ai continué à chercher de mon côté et j'ai réussi a faire quelque chose de pas trop mal. Voici le code :

    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
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tests effet de fondu sur lien</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
     
    <script type="text/javascript">
    $(document).ready(function(){
     
    	/* Effet de fondu en arrivant sur la page */
    	$('#wait').animate({opacity: '1'}).fadeOut(500);
     
    	/* Clic sur un des liens de la balise p, on lance une fonction */
    	$('p a').click(function(event){
     
    	/* Bloquage de l'effet par défaut des liens (= redirection) */
    		event.preventDefault();
     
    	/* Récupération de la valeur href du lien et mise en variable (vHref) */
    		vHref = $(this).attr('href');
     
    	/* Effet de fondu en quittant la page + redirection */
    		$('#wait').css({opacity: '1'}).fadeIn(500);
    			setTimeout('document.location.href = "'+ vHref +'"', 750);
    		});
    });
    </script>
     
    <style type="text/css">
    #wait {
    	position:absolute;
    	top:0;
    	left:0;
    	height:100%;
    	width:100%;
    	background-color:#FF0000;
    }
    </style>
     
    </head>
     
    <body>
     
     
    <div id="wait"></div>
     
    <p> <a href="http://www.google.fr">lien</a> </p>
    <p> <a href="http://www.google.fr">lien</a> </p>
    <p> <a href="http://www.google.fr">lien</a> </p>
    <p> <a href="http://www.google.fr">lien</a> </p>
    <p> <a href="http://www.google.fr">lien</a> </p> 
     
     
    </body>
     
    </html>
    Cependant, j'ai encore un petit soucis, lorsqu'on revient en arrière via le bouton back on tombe sur le voile rouge.

    Comment faire pour corriger ce soucis, car il ne semble pas possible de gérer en jquery les événements window.history.back(); !

    Comment faire ?

    Merci pour votre aide !

  4. #4
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2012
    Messages
    8
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Moselle (Lorraine)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juillet 2012
    Messages : 8
    Par défaut
    Je n'ai pas bien compris ce que tu cherchais a faire mais pour retiré à nouveau le 'film' rouge que tu as :

    rajoute ce qu'il y a en gras :

    Code jQuery : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    /* Effet de fondu en quittant la page + redirection */
            $('#wait').css({opacity: '1'}).fadeIn(500);
           
                setTimeout('document.location.href = "'+ vHref +'"', 750);
    $('#wait').animate({opacity: '1'}).fadeOut(500);

Discussions similaires

  1. Lien vers une animation en Flash
    Par ML2006 dans le forum Flash
    Réponses: 1
    Dernier message: 20/03/2007, 14h25
  2. Lien sur une animation en .swf ?
    Par Ocelot dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 22/01/2007, 22h34
  3. Lien vers une anim flash sous forme de popup
    Par ghyosmik dans le forum Flash
    Réponses: 1
    Dernier message: 15/06/2006, 10h28
  4. [FLASH MX] Lien d'une animation Flash vers une page html
    Par tinkye_winkye dans le forum Flash
    Réponses: 10
    Dernier message: 19/01/2005, 10h11
  5. Réponses: 3
    Dernier message: 11/04/2004, 01h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo