Besoin d'aide sur mouseover et mouseout

Version imprimable

Bonjour à tous,

Je débute tout juste en jQuery, qui m'a été conseillé pour régler un pb de rollover, mais la je cale.

Voici mon script, qui fonctionne dans l'état mais auquel je souhaiterais ajouter des conditions. Et c'est là que je galère

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
 
jQuery(document).ready(function(){
/****************menus*****************/
  jQuery("#menu_cuisine").show(function(){
    jQuery("#left").fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  }
 
  );
  jQuery("#menu_salon").show(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery("#right").fadeTo("slow",1);
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  });
 
 
/****************over*****************/
  jQuery("#left").mouseover(function(){
    jQuery(this).fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  });
 
 
  jQuery("#right").mouseover(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery(this).fadeTo("slow",1);
    jQuery("#right2").hide();
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  });
 
 
/****************out******************/
jQuery("#left").mouseout(function(){
    jQuery(this).fadeTo("slow",0.10);
      jQuery("#right").fadeTo("slow",1);
      jQuery("#salon").fadeTo("slow",1);
      jQuery("#cuisine").hide();
 
  });
 
jQuery("#right").mouseout(function(){
      jQuery(this).fadeTo("slow",0.10);
      jQuery("#left").fadeTo("slow",1);
      jQuery("#salon").hide();
      jQuery("#cuisine").fadeTo("slow",1);
 });
 
});
</script>

Je voudrais que :

Lorsque le menu cuisine est affiché :

Code:

1
2
3
4
5
6
jQuery("#menu_cuisine").show(function(){
    jQuery("#left").fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  }

Lorsque le menu cuisine est affiché et que mouseover sur right alors :

Code:

1
2
3
4
5
6
jQuery("#right").mouseover(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery(this).fadeTo("slow",1);
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  });

Lorsque le menu cuisine est affiché et que mouseout sur right alors :

Code:

1
2
3
4
5
6
jQuery("#right").mouseout(function(){
      jQuery(this).fadeTo("slow",0.10);
      jQuery("#left").fadeTo("slow",1);
      jQuery("#salon").hide();
      jQuery("#cuisine").fadeTo("slow",1);
 });

Lorsque le menu cuisine est affiché et que mouseover et mouseout sur left alors :

Code:

1
2
3
4
5
 
      jQuery(right).opacity 0.10 (mais là, je ne sais pas :oops:)
      jQuery("#left").show();
      jQuery("#salon").hide();
      jQuery("#cuisine").show();

Inversement pour le menu salon
Mais si déjà, vous pouvez m'éclairer pour le menu cuisine, je pense que je pourrais me débrouiller pour l'autre... ;)

J'ai essayé en mettant des conditions if, else if et else mais à chaque fois, je perds mes effets :cry:

Par exemple :

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
25
26
27
 
jQuery(document).ready(function(){
/****************menus*****************/
  jQuery("#menu_cuisine").show(function(){
 
if jQuery("#left").mouseover(function(){
    jQuery(this).show();
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  })
 
else if jQuery("#right").mouseover(function(){
    jQuery("#left").fadeTo("slow",0.10);
    jQuery(this).show();
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
  })
 
else {
    jQuery("#left").fadeTo("slow",1);
    jQuery("#right").fadeTo("slow",0.10);
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
  }
 
  });

Merci pour votre aide et/ou conseils
@ +++

15/12/2010, 19h55
SpaceFrog

perso je passerais pas un mouseenter et mouseleave, j'ai toujours eu des soucis avec les autres
15/12/2010, 19h59
jakols

ok merci ;)
je vais tester ça

sinon les conditions telles que je les ai écrites plus haut c'est correct ?
15/12/2010, 20h48
SpaceFrog

je pige pas le test

Code:

if jQuery("#left").mouseover

on peut tester un mouseover ?
15/12/2010, 22h57
jakols

ah bah je ne sais pô.
comme dit, c'est ma première expérience alors...
il faudrait faire quoi alors ?
je regarde depuis des jours ici et là, en plus du reste...mais je ne trouve pas pour ces histoires de conditions.
Alors si vous pouviez m'aiguiller ça serait sympa ;)
Merci
@ +++

je viens de tester avec ça :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
jQuery(document).ready(function(){
/****************menus*****************/
jQuery("#left, #right, #cuisine, #salon").show(function(){
    jQuery("#left, #right, #cuisine, #salon").fadeTo("slow",1);
  });
jQuery("#left, #right, #cuisine, #salon").hide(function(){
    jQuery("#left, #right, #cuisine, #salon").fadeTo("slow",0.1);
  });
 
jQuery("#menu_cuisine").show(function(){
    jQuery("#left, #cuisine").show();
    jQuery("#right").hide();
    jQuery("#salon").fadeOut();
 
    jQuery("#right").mouseenter(function (){;
      jQuery("#right, #salon").show();
      jQuery("#left").hide();
      jQuery("#cuisine").fadeOut();
      }).mouseleave(function (){;
      jQuery("#right").hide();
      jQuery("#left, #cuisine").show();
      jQuery("#salon").fadeOut();
      });
 
 
  });
 
 
 
jQuery("#menu_salon").show(function(){
    jQuery("#left").hide();
    jQuery("#right").show();
    jQuery("#salon").show();
    jQuery("#cuisine").fadeOut();
    jQuery("#left").mouseenter(function (){;
      jQuery("#left").show();
      jQuery("#right").hide();
      jQuery("#salon").fadeOut();
      jQuery("#cuisine").show();
      }).mouseleave(function (){;
      jQuery("#right").show();
      jQuery("#left").hide();
      jQuery("#salon").show();
      jQuery("#cuisine").fadeOut();
      });
 
 
  });
 
});
 
</script>

Y'a des choses qui se passent mais bon, c'est pas encore ça.
J'ai vu aussi que peut être .hover () ou toggle () pourrait m'être utile ?!?

Merci pour vos conseils
@ +

Bonjour à tous,

alors dernier test en cours :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script type="text/javascript">
// rollover
 
jQuery(document).ready(function(){
 
 
  jQuery("#menu_cuisine").show(function(){
    jQuery("#left").fadeTo("slow", 1), .hover(function()
	     {$(this).show();
        jQuery("#salon").hide();
        jQuery("#cuisine").show();},
    	 function(){$(this).show();
        jQuery("#salon").hide();
        jQuery("#cuisine").show();}
       );
    jQuery("#right").fadeTo("slow", 0.10).hover(function()
	     {$(this).fadeTo("slow", 1);
        jQuery("#salon").fadeTo("slow",1);
        jQuery("#cuisine").hide();},
    	 function(){$(this).fadeTo("slow", 0.10);
        jQuery("#salon").hide();
        jQuery("#cuisine").fadeTo("slow",1);}
       );
    jQuery("#salon").hide();
    jQuery("#cuisine").fadeTo("slow",1);
}
);
 
  jQuery("#menu_salon").show(function(){
    jQuery("#left").fadeTo("slow", 0.10), .hover(function()
	     {$(this).fadeTo("slow", 1);
        jQuery("#salon").hide();
        jQuery("#cuisine").fadeTo("slow",1);},
    	 function(){$(this).fadeTo("slow",0.10);
        jQuery("#salon").fadeTo("slow",1);
        jQuery("#cuisine").hide();}
       );
    jQuery("#right").fadeTo("slow", 0.10),.hover(function()
	     {$(this).show();
        jQuery("#salon").show();
        jQuery("#cuisine").hide();},
    	 function(){$(this).show();
        jQuery("#salon").show();
        jQuery("#cuisine").hide();}
       );
    jQuery("#salon").fadeTo("slow",1);
    jQuery("#cuisine").hide();
}
);
 
});
 
</script>

Marche pas non plus :cry:
Toutes les images s'affichent et rien ne se passe...

Des pistes ???
Merci bcp,
@ ++