javascript - animation au clique de la souris.

[Invité]

Bonjour,

→ adresse du forum : http://assassinscreed-evol.forumactif.org/
→ version phpBB2.
→ fondatrice du forum.
→ j'utilise chrome & firefox.

Déjà, merci du temps que vous allez m'accorder.
Mon problème réside dans un code javascript que j'ai ajouté au forum. il s'agit d'un code pour des légendes coulissantes. l'animation se déclenche au passage de la souris. mais pour des soucis pratiques, j'aimerais que l'animation se déclenche au clique de la souris. étant donné que je suis nulle en javascript, je fais appelle à vous.

le code javascript

Code:

$(document).ready(function(){

$('.boite.legendecachee').hover(function(){

$(".anim", this).stop().animate({top:'0px'},{queue:false,duration:160});

},function(){

$(".anim", this).stop().animate({top:'45px'},{queue:false,duration:160});

});//

});

le code css

Code:

/* LEGENDE COULISSANTE */
.boite{position:relative; right:10px;
width:150px;
height:58px;
float:left;
background-color:#CCCDCE;
overflow:hidden;
padding-top:2px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;}

.legende{position:absolute;
background-color:#CCCDCE;
top:45px;
height:58px;
width:146px;
left:0; padding-top:2px; padding-right:2px; padding-left:2px;
line-height:normal;
overflow:auto;}

et le code html situé dans templates → gérénal → index_box

Code:

<div class="boite legendecachee" style="margin-bottom:5px;">
    <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          <div class="legende anim">
                  <span class="gensmall"><i>passe ta souris !</i><br/>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
          </div>
</div>

merci.

[Arlem]

Bonjour

Essayez en remplaçant :

Code:

$('.boite.legendecachee').hover(function(){

Par :

Code:

$('.boite.legendecachee').click(function(){

[Invité]

bonjour arlem,

j'ai fait le changement dans le code javascript. malheureusement, ça ne fonctionne pas. l'animation ne marche pas du tout.

merci de m'avoir accorder un peu de temps. (:

[Arlem]

Effectivement, j'avais mis un peu trop d'espoir dans le fait que ça marche.

Essayez en remplaçant le code JS par celui-ci :

Code:

$(document).ready(function() {
   $('.boite.legendecachee').click(function() {
      $(".anim", this).stop().animate( {top:'0px'}, {queue:false,duration:160});
   });
});

[Invité]

yeah, ça marche ! un grand merci !
je vote pour ce message. (: