Imprimer la Page

Forum-webmaster

Technique - programmation => Javascript / DOM / Ajax => Message commencé par: Josuee298 le le 27-07-2015 a 10:59:14

Titre: code jQuery animation survol
Posté par: Josuee298 le le 27-07-2015 a 10:59:14

Bonjour,

Voici le code que j'ai fais pour une anim lorsque le curseur survol une image placée dans un lien :

Code:

<div id="icone">
         <a href ="#">
            <span class="descr">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</span>
            <span class="bg"></span>
            <img src="images/ico_marche.gif" id="logo"/>
         </a>
      </div>

Code:

.descr{
   position: absolute;
   top: 0;
   width: 150px;
   height: 220px;
   padding: 5px;
   text-decoration: none;
   text-align: center;
   color: #fff;
   z-index: 2;
}

.bg{
   position: absolute;
   width: 150px;
   height: 220px;
   padding: 5px;
   border: solid black 1px;
   border-radius: 10px;
   background: #000;
   z-index: 1;
}

#logo{
   position: absolute;
   top: 35px;
   left: 47px;
}

a span {display: none;}
a:hover span {display: block;}

Code:

$(document).ready(function(){

   var t = parseInt($('#icone a span.descr').css('top'));

   $('#icone a').mouseover(function() {
      $(this).find('span.bg').hide().stop().fadeTo(500,0.7);
      $(this).find('span.descr').css({
         opacity : 0,
         top : t + 50,
      }).animate({
         opacity : 1,
         top : t,
      });
   });

   $('#icone a').mouseleave(function() {
      $(this).find('span.bg').show().stop().fadeTo(500,0.0);
      $(this).find('span.descr').show().css({
         opacity : 1,
         top : t,
      }).animate({
         opacity :1,
         top : t + 50,
      });
   });


});

Il y a un truc qui cloche, car quand le curseur se retire du lien, l'animation du texte qui devrait redescendre ne marche pas. Quelqu'un verrai comment améliorer le jQuery (si c'est là le problème) ? Car j'ai beau essayer de rajouter des stop() ou des show() ou autre, et ça ne marche toujours pas ... :(