Discussion :

[cedrick21]

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 :

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
 
<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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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() ???

[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 !

[undead001]

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 :

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
<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 );
	});
}

[SpaceFrog]

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

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.

[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 "#"