Fonction animate et onmouseover/onmouseout

Version imprimable

bonjour à tous

j'ai un div de 50px de large contenant en son centre une image (un picto en fait)

lorsque je passe sur l'image (onmouseover) la partie droite du div s'agrandie pour laisser apparaitre un texte
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div class="blocGauche" id="blocGauche_accueil" onmouseout="cacheMenuDeroulant('accueil');"> <img src="monimage.png" alt="..." onmouseover="afficheMenuDeroulant('accueil');" /> </div> et le js ... function afficheMenuDeroulant(idMenu) { $(document).ready(function(){ $('#blocGauche_'+idMenu).animate({ width: "175px" }, 250 ); }); } function cacheMenuDeroulant(idMenu) { $(document).ready(function(){ $('#blocGauche_'+idMenu).animate({ width: "50px" }, 250 ); }); }
le soucis est le suivant :
j'ai bien mon div qui passe à 175px de large lorsque je suis sur l'image (onmouseover)
Pour que le div reprenne sa taille initiale il faut que je quitte le survole du div (onmouseout)
Or dès que je quitte le survol de l'image le onmouseover se fait, pourtant mon pointeur est toujours dans le div !

Au départ j'avais mis onmouseover et onmouseout sur le div directement mais ça faisait clignoter mon div ...

Merci d'avance pour votre aide

Code:

1 2 3 4 5 6 7 8 function afficheMenuDeroulant(idMenu) { $(document).ready(function(){ $('#blocGauche_'+idMenu).animate({ width: "175px" }, 250 ); }); }
heu c'est quoi de document ready dans la fonction ???
as tu bien compris l'utilité de $(document).ready() ???

06/12/2012, 11h30
Bovino

+1 Spaffy !
Mettre des $(document).ready() dans le corps d'une fonction est un non sens qui révèle des lacunes importantes dans la connaissance et de jQuery et de JavaScript.
D'autre part, ta façon de procéder est mauvaise, les événements mouseover et mouseout se propageant, si l'image reçoit l'événement mouseout, il sera déclenché sur la div qui contient cette image.

Heureusement, jQuery propose une alternative avec mouseenter et mouseleave qui sont les événements à utiliser dans ton cas !

Bonjour,
J'ai un doute, tu travaille sur le ID et donc le "#" est en trop non?
Je ne suis pas sur de ma réponse.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="blocGauche" id="blocGauche_accueil" onmouseout="cacheMenuDeroulant('accueil');">
<img src="monimage.png" alt="..." onmouseover="afficheMenuDeroulant('accueil');" />
</div>
 
et le js ...
 
function afficheMenuDeroulant(idMenu)
{
	$(document).ready(function(){		
		$('#blocGauche_'+idMenu).animate({ 
	        width: "175px"
	      }, 250 );
	});
}
 
function cacheMenuDeroulant(idMenu)
{
	$(document).ready(function(){		
		$('#blocGauche_'+idMenu).animate({ 
	        width: "50px"
	      }, 250 );
	});
}

06/12/2012, 11h51
SpaceFrog

visiblement tu ne lis pas les réponses ...

Citation:

Envoyé par Beef

Mettre des $(document).ready() dans le corps d'une fonction est un non sens qui révèle des lacunes importantes dans la connaissance et de jQuery et de JavaScript.
06/12/2012, 12h00
undead001

Si je les ai lu,
s'il rétabli le problème du .ready() dans le corps de la fonction il risque de se confronter également à ce problème...

et je voulais juste avoir une confirmation, car j'apprends le JS depuis moins d'un an, et je ne suis pas sur de la règle des "#"

merci de ces renseignements, effectivement je suis loin d'être un crack en js et jquery j'y vais plus à tâtons qu'autre chose...

j'ai donc bien réussi à faire ce que je voulais avec mouseenter et mouseleave

Or un autre problème se pose pour moi

J'ai réécrit en dur dans mon exemple l'id des blocs (blocGauche_accueil).
Or il peut y avoir plusieurs div dans le nom est générer via une boucle php.

J'ai donc rajouté dans ma boucle la chose suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 foreach($menuGauche as $index=>$tab) { echo '<div class="blocGauche" id="blocGauche_'.$tab['module'].'"> <a href="'.Url::setUrl($tab['module']).'">'.$image.'</a> <div id="blocGaucheFlottant_'.$tab['module'].'" class="blocGaucheTexte"><a href="'.Url::setUrl($tab['module']).'">'.$tab['module'].'</a></div> </div> <script type="text/javascript"> $(\'#blocGauche_'.$tab['module'].'\').mouseenter(function() { $(\'#blocGauche_'.$tab['module'].'\').animate({ width: "175px" }, 250 ); }); $(\'#blocGauche_'.$tab['module'].'\').mouseleave(function() { $(\'#blocGauche_'.$tab['module'].'\').animate({ width: "50px" }, 250 ); }); </script>'; }
le soucis c'est que j'ai une fonction créée à chaque fois dans ma boucle et ça me plait moyennement, j'aurai préféré avoir une seule fonction avec comme paramètre l'id du div lors du mouseenter et mouseleave.

Or je ne vois pas trop comment faire vu qu'il n'y a pas d'équivalent du style onmouseleave="function ..."Merci de m'éclairer à ce sujet.

Non, utiliser des attributs d'événements n'est pas la solution !

Puisque tes éléments ont une classe commune, c'est elle qu'il faut utiliser pour instancier la gestion des événements, ensuite, dans le callback du gestionnaire, tu peux te référer à this (ou $(this)) pour cibler l'élément en cours de traitement.
Code:

1 2 3 4 5 6 7 8 9 10 $('.blocGauche').on({ mouseenter: function(){ var thisId = this.id; // etc... }, mouseleave: function(){ var thisId = this.id; // etc... } });

06/12/2012, 14h39
cedrick21

merci beaucoup pour ton aide