Discussion :

[jakols]

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 :

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

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

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 :

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

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 :

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

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 :

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

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

Par exemple :

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

[SpaceFrog]

perso je passerais pas un mouseenter et mouseleave, j'ai toujours eu des soucis avec les autres

[jakols]

ok merci
je vais tester ça

sinon les conditions telles que je les ai écrites plus haut c'est correct ?

[SpaceFrog]

je pige pas le test

Code :

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

if jQuery("#left").mouseover

on peut tester un mouseover ?

[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
@ +++

[jakols]

je viens de tester avec ça :

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

[jakols]

Bonjour à tous,

alors dernier test en cours :

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
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
Toutes les images s'affichent et rien ne se passe...

Des pistes ???
Merci bcp,
@ ++