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

  1. #1
    Nouveau membre du Club
    Profil pro
    Inscrit en
    juin 2008
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : juin 2008
    Messages : 49
    Points : 31
    Points
    31
    Par défaut Animations : ne se terminent pas avant que les autres ne commencent
    Bonjours à tous et toutes,

    Je n'arrive pas à réaliser exactement l'effet que je désire.
    Je vais essayer de m'expliquer le plus clairement possible.

    J'ai 4 liens et lorsque je survole un des liens, une animation se joue (juste en dessous) pour faire apparaître le titre du lien.
    Le soucis est que lorsque l'on va trop vite avec la souris sur un autre lien, l'animation ne se joue plus correctement et fait ceci :

    -Le texte à l'intérieur du rectangle noir est remplacer par celui de l'autre lien survolé sans rejouer l'animation du ce rectangle depuis le départ.


    Je vais vous fournir le lien de ma page en ligne :

    Ma page test


    Ainsi que 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
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>animate box</title>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.hoverflow.js" type="text/javascript" charset="utf-8"></script>
       	<script type="text/javascript">
     
    $(document).ready(function() {
    	$("ul.works_title li").hide();
     
    	$(".links_works").mouseenter(function(e) {
     
    			var target = $(this).attr('rel'); 
     
    			$('#'+target).hoverFlow(e.type, {'opacity': 'show'});
     
        		$("#box_resultat").hoverFlow(e.type, { width: "500" }, 500 );
         	}); 
     
         $(".links_works").mouseleave(function(e) {
     
         		var target = $(this).attr('rel');
     
    			$('#'+target).hoverFlow(e.type, {'opacity': 'hide'});
     
        		$("#box_resultat").hoverFlow(e.type, { width: "0" }, 500 );
      		});
    });
     
    	</script>
        <style type="text/css" media="screen">
     
     
     
    	div#works{
    	overflow:auto;
    	}
     
      	.links_works{
      	text-decoration: none;
      	display: block;
      	width:50px;
      	height:50px;
      	border:1px solid grey;
      	float:left;
      	margin-left:20px;
      	}
     
      	#box_resultat {
    	background: black;
    	height: 100px;
    	width: 0px;
    	position: absolute;
    	}   
     
    	ul.works_title li {
    	position:absolute;
    	top:10px;
    	text-transform: uppercase;
    	list-style: none;
    	width:500px;
    	font-size:70px;
    	color:white;
    	}
     
     
        </style>
     
    </head>
    <body>
    	<div id="works">
    		<a class="links_works" href="" rel="1">1</a>
    		<a class="links_works" href="" rel="2">2</a>
    		<a class="links_works" href="" rel="3">3</a>
    		<a class="links_works" href="" rel="4">4</a>
    		<a class="links_works" href="" rel="5">5</a>
    	</div>
       	<div id="box_resultat">
       		<ul class="works_title">
       			<li id="1">Travail N°1</li>
       			<li id="2">Travail N°2</li>
       			<li id="3">Travail N°3</li>
       			<li id="4">Travail N°4</li>
       			<li id="5">Travail N°5</li>
       		</ul>
       	</div>
     
    </body>
     
    </html>
    Voilà j'espère que l'un de vous saura me débloquer.

    Merci par avance.

  2. #2
    Membre éprouvé
    Avatar de randriano
    Homme Profil pro
    Inscrit en
    janvier 2007
    Messages
    1 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Madagascar

    Informations forums :
    Inscription : janvier 2007
    Messages : 1 211
    Points : 1 035
    Points
    1 035
    Par défaut
    J'ai visionné votre lien et je me suis souvenu qu'un cas similaire ici: http://www.developpez.net/forums/d90...on-levenement/
    La solution qu'il a trouvé c'est la fonction stop() de JQuery avec stop(true,true).fadeIn() à utiliser
    randriano.dvp.com
    Développeur. Product Owner [Agile]. Sites web, mobile apps, système d'information (SI).

  3. #3
    Nouveau membre du Club
    Profil pro
    Inscrit en
    juin 2008
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : juin 2008
    Messages : 49
    Points : 31
    Points
    31
    Par défaut
    Merci Randriano pour votre réponse.
    J'ai visionner le lien que vous m'avez fourni et je n'y ai pas vu la méthode que vous me proposez.

    De plus je ne sais vraiment pas comment la mettre en application sur mon code Javascript..

    Sauriez vous me mettre sur la piste en regardant le code que j'ai fourni sous la page test.

    Merci par avance.

  4. #4
    Membre éprouvé
    Avatar de randriano
    Homme Profil pro
    Inscrit en
    janvier 2007
    Messages
    1 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Madagascar

    Informations forums :
    Inscription : janvier 2007
    Messages : 1 211
    Points : 1 035
    Points
    1 035
    Par défaut
    Voici les liens:

    http://api.jquery.com/stop/

    Le principe est de stopper l'animation en cours quand un autre va démarrer

    $("#box_resultat").stop(true,true).hoverFlow(
    randriano.dvp.com
    Développeur. Product Owner [Agile]. Sites web, mobile apps, système d'information (SI).

  5. #5
    Nouveau membre du Club
    Profil pro
    Inscrit en
    juin 2008
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : juin 2008
    Messages : 49
    Points : 31
    Points
    31
    Par défaut
    Merci pour votre réponse, le truc c'est que je ne veux pas la stopper, je veux qu'elle se termine entièrement avant que l'autre ne commence et qu'elles n'empiètent pas l'une sur l'autre...

    J'ai appliqué votre méthode qui est intéressante mais ce n'est pas l'effet que je recherche.

    Je ne sais pas si vous comprenez exactement l'effet que je désire obtenir ?

    Merci beaucoup de vous intéresser à mon problème

  6. #6
    Membre éprouvé
    Avatar de randriano
    Homme Profil pro
    Inscrit en
    janvier 2007
    Messages
    1 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Madagascar

    Informations forums :
    Inscription : janvier 2007
    Messages : 1 211
    Points : 1 035
    Points
    1 035
    Par défaut
    Citation Envoyé par doncho23 Voir le message
    je veux qu'elle se termine entièrement avant que l'autre ne commence et qu'elles n'empiètent pas l'une sur l'autre...
    C'est donc pas similaire à l'autre cas
    Je crois que c'est possible mais je ne trouve pas encore comment, jquery grouille beaucoup d'astuces
    randriano.dvp.com
    Développeur. Product Owner [Agile]. Sites web, mobile apps, système d'information (SI).

  7. #7
    Nouveau membre du Club
    Profil pro
    Inscrit en
    juin 2008
    Messages
    49
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : juin 2008
    Messages : 49
    Points : 31
    Points
    31
    Par défaut
    Merci pour votre réaction, je vais continuer à chercher une solution de mon coté. Si vous en trouvez une entre temps je vous serais très reconnaissant de me l'indiquer.

    Je suis toujours ouvert à toutes propositions venant de n'importe qui pour résoudre mon problème.

    Merci par avance, en espérant trouver une solution

Discussions similaires

  1. le em de firefox n'est pas pareil que les autres ?
    Par clavier12AZQSWX dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 08/04/2010, 13h33
  2. Réponses: 6
    Dernier message: 02/08/2009, 12h39
  3. Réponses: 5
    Dernier message: 19/01/2007, 22h53
  4. Qu'est-ce-que perl à de plus que les autres ?
    Par Celelibi dans le forum Langage
    Réponses: 7
    Dernier message: 24/08/2005, 01h00

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