ajouter une animation

bilboyk
Javascript

bonjour

j'ai suivi le tutoriel d'effet de survol ça marche super bien merci ce tutoriel :), je débute en javascript et en jquery je travail sur un site que j'avance doucement voila le lien c.com (j'accepte les critiques :) ) je veux ameliorer l'animation, je veux que non seulement lors de survol sur les carreau qui anime mais même lorsque on survol sur les lien des menu les carreau animent aussi le menu contient les même élément que les carreau

voici le code html

<body >

      <!-- menu -->

    <div id="bar-top"> 

              <ul id="liste">
              <li><a href="#">Accueil</a></li>
              <li><a href="apropos.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;">A propos</a></li>
              <li><a href="#">Entreprise</a></li>
              <li><a href="#">Congres</a></li>
              <li><a href="#">Web</a></li>
              <li><a href="#">Entreprise</a></li>
              <li><a href="#">Actualités</a></li>
              <li><a href="references.php">Références</a></li>
              <li><a href="contact.php" rel="license" onclick="javascript:return(false)" 
                     class="lightbox" style="cursor:pointer;">Contact</a></li>
             </ul>

  </div>
    <div id="container" style="margin-top:60px;">

             <div class="logo"> <img src="images/logo.png" alt="logo"> </div>
             <div id="container2" >
                        <div class="grille">
                           <a href="apropos.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >A propos de C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/1.JPG"></span>
                           <img src="logo/1.png" ></a>

                           <a href="pages/test.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >CONGRES C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/2.JPG"></span>
                                 <img src="logo/3.png" ></a>

                           <a href="pages/test.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >CONGRES C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/3.JPG"></span>
                              <img src="logo/5.png" >
                           </a>
                           <a href="references.php" style="margin-right:15px;margin-bottom:15px;">
                              <span class="title" >REFERENCES C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/4.JPG"></span>
                                 <img src="logo/7.png" ></a>
                           <a href="pages/test.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >CONGRES C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/5.JPG"></span>
                                 <img src="logo/9.png" ></a>

                           <a href="pages/test.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >CONGRES C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/6.JPG"></span>
                                 <img src="logo/11.png" ></a>

                          <a href="pages/test.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >CONGRES C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/4.JPG"></span>
                                 <img src="logo/13.png" ></a>

                           <a href="pages/test.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >CONGRES C.COM</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/4.JPG"></span>
                                 <img src="logo/15.png" ></a>

                           <a href="contact.php" rel="license" onclick="javascript:return(false)" 
                           class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
                              <span class="title" >Contact</span>
                              <span class="disc">sous titre </span>
                              <span class="bg"><img id="image1" src="images/4.JPG"></span>
                                 <img src="logo/17.png" ></a>
                          </div>
             </div>
    </div>
    <div id="bgPopup"></div>
    <div id="Popup"><div id="fermer" style=""><img src="images/icones/closebox.png" alt="fermer la fenêtre" title="Fermer la fenêtre" /></div>
    <div id="contenu"></div><div id="load"></div></div>
    <div id="bandelaterale"></div>
    <div id="chapeau"><img src="images/chapeau.png"></div>
 </body>

et voici le code javascript : 

$(function() {
     var current = null;

  var t = parseInt($('#container2 a:first span.title').css('top')); // la heuteur de titre.
   var l = parseInt($('#container2 a:first span.disc').css('left')); // la largeur de description.

    $('#container2 a').mouseover (function(){  
      if(current && $(this).index() != current.index()){
          current.find('span.bg').stop().fadeOut();
          current .find('span.title').stop().show().animate({
            top:t-50,
            opacity:0
          });
          current .find('span.disc').stop().show().animate({
            left:l-50,
            opacity:0
          });
      }
      if(current && $(this).index() == current.index()){
          return null;
      }

      $(this).find('span.bg').stop().hide().fadeTo(500,1);
      $(this).find('span.title').stop().css({
          opacity:0,
          top: t+50
      }).animate({
        opacity:1,
        top: t
      }); 

      $(this).find('span.disc').stop().css({
          opacity:0,
          left: l-50
      }).animate({
        opacity:1,
        left: l
      });
      current = $(this);

    });

});

j'aimerai bien la réaliser j'arrive mm pas a commencer, si vous avez des suggestion ou des solutions je serai ravi :)

merci d'avance.

1 réponse

soohikei

Bonjour,

J'ai une solution qui pourrait vous aidez à avancer mais je ne sais pas si c'est la bonne ...

En faite il faut rajouter une class à votre lien du menu et donnée la même class au carreau correspondant cependant comme vous avez des class dans vos block carreaux à la place vous mettez un id du même nom que la class du menu.

par exemple :

<li><a class="apropos" href="apropos.php"</a></li>

et 

<a id="aprops" href="apropos.php" rel="license" onclick="javascript:return(false)"
             class="lightbox" style="cursor:pointer;margin-right:15px;margin-bottom:15px;">
     <span class="title" >A propos de C.COM</span>
    <span class="disc">sous titre </span>
    <span class="bg"><img id="image1" src="images/1.JPG"></span>
    <img src="logo/1.png" ></a>

en suite dans le js il suffit qu'au survol du lien récupérer la class de celui-ci et aller chercher l'id correspondante dans le block grille