Problème dans fonction jquery par un onmouseover: 2 passage de souris!

Bonjour à tous!

Depuis pas mal de temps je trouve toutes mes réponses sur ce forum, mais pour cette fois que nini... Donc mon premier post chez vous (j'ai au peu soucis... )

Donc voici mon l'état de la situation:

L'action:
Mon site dispose d'un menu en haut de page. Lorsque l'on "mousover" sur un item de ce menu, le menu s'affiche et une div apparaît sous ce menu avec un .animate(opacity). 0->30%
Même principe pour le survol sur le menu qui vient de dérouler avec un .animate(opacity). 30->100%

Le problème:
Cela fonctionne parfaitement.... mais seulement au 2ème passage de la souris, la première fois...
- Chargement de la page
- mouseover 1: le menu déroule
- mouseover 2: la div apparaît
- mouseover 3: le menu déroule et la div apparaît dessous (c'est ça que je veux dès la 1ere fois)

dès que la div est apparue une fois, plus de problème... jusqu'au prochain chargement de page.

Le code html:

    <ul>
      <li class="niveau1Corporate" onmouseover="bgFad1('.niveau1Corporate','#bgCorporate')" onmouseout="bgFad1('.niveau1Corporate','#bgCorporate')">Menu 1
        <ul class="niveau2" onmouseover="bgFad2('.niveau2','#bgCorporate')" onmouseout="bgFad2('.niveau2','#bgCorporate')">
          <li> <a href= "#">Sous menu 1</a> </li>
          <li> <a href= "#">Sous menu 2</a> </li>
        </ul>
      </li>
    </ul>

le code JS

<script type='text/javascript'>
function bgFad1(classNav, idBg){
	$(classNav).hover(
		function() {
			$(idBg).css("display", "block");
			$(idBg).stop().animate({"opacity": ".3"}, "slow");
		},
		function() {
			$(idBg).stop().animate({"opacity": "0"}, "normal");
			$(idBg).css("display", "none");
		});
}
function bgFad2(classNav, idBg){
	$(classNav).hover(
		function() {
			$(idBg).stop().animate({"opacity": ".9"}, "slow");
		},
		function() {
			$(idBg).stop().animate({"opacity": ".3"}, "normal");
		});
}
</script>

Pour la CSS, il s'agit simplement d'un :hover qui affiche la liste du sous-menu

Petite précision:
Vous allez me demander "pourquoi cette div sous ce menu"... Et je vais vous répondre parce que...
En fait cette div occupe le 100% de la hauteur et permet de jouer avec la transparence sans que le texte du menu soit touché.

Je vous place le template en développement à cette adresse, au cas où:
http://www.parallele.ch/siteDev/index.html

Voilà alors je sèche un peu là... Si vous avez une piste, ce sera avec grand plaisir

Merci d'avance et excellente journée!

Seb

Bonsoir,
je pense que ce qui t'arrive est normal, vu que ce que tu fais au premier passage, c'est déclarer l'évènement ... au second, comme l'évènement est déclaré, ça marche, mais tu le redéclares.

Tu devrais retirer les onmouseover de tes tags html et juste laisser les évènements jquery. Car la syntaxe jquery que tu utilises signifie : au chargement de ma page, je veux que ce sélecteur est tel comportement.

Tu dois cependant écrite ton js de cette manière:

jQuery(function(){
 $(classNav).hover( 
        function() { 
            $(idBg).css("display", "block"); 
            $(idBg).stop().animate({"opacity": ".3"}, "slow"); 
        }, 
        function() { 
            $(idBg).stop().animate({"opacity": "0"}, "normal"); 
            $(idBg).css("display", "none"); 
        }); 


$(classNav).hover( 
        function() { 
            $(idBg).stop().animate({"opacity": ".9"}, "slow"); 
        }, 
        function() { 
            $(idBg).stop().animate({"opacity": ".3"}, "normal"); 
        }); 
});

Modifié par loicbcn (16 Jan 2011 - 19:52)

Bonsoir loicbcn,

Merci pour ta réponse, c'est exactement ça!!

Tu auras compris que je débute dans ce langage...

Mais petite question encore afin d'affiner un peu mes connaissances: je suis passé par des onmouseover afin de pouvoir déclarer des arguments différents dans une fonction unique.

Dans la situation actuelle et, étant donné que j'ai 4 zones de navigation je trouve peu optimal de copier/coller 4x la fonction ?! => 1x pour chaque menu...

Puisque la class du menu "niveau1a" est en relation avec le fond "bgCorporate",
"niveau1Consulting" -> "bgConsulting",
"niveau1Ingenierie" -> "bgIngenierie",
"niveau1Energie" -> "bgEnergie"

jQuery(function(){ 
 $(".niveau1Corporate").hover(  
        function() {  
            $("#bgCorporate").css("display", "block");  
            $("#bgCorporate").stop().animate({"opacity": ".3"}, "slow");  
        },  
        function() {  
            $("#bgCorporate").stop().animate({"opacity": "0"}, "normal");  
            $("#bgCorporate").css("display", "none");  
        });  
 
 
$(".niveau2").hover(  
        function() {  
            $("#bgCorporate").stop().animate({"opacity": ".9"}, "slow");  
        },  
        function() {  
            $("#bgCorporate").stop().animate({"opacity": ".3"}, "normal");  
        });  
}); 

Merci encore pour tes explications!
Bonne soirée