faire petit à petit mon menu

Version imprimable

Bonsoir, je souhaite faire un menu ou lorsqu'on est sur une bande noire le menu apparaît.
Mais avant d'y arriver j'essaye de faire un des petits test.

voici ce script

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<style>
#interieur
{
display:block;
	background:red;
	display:none;
height:200px;
width:200px;
}
 
#box
{
height:200px;
width:200px;
background:blue;
}
 
</style>
 
<div id="box">
 
  <div id="interieur" >menu apparaît disparrait.</div>
 
</div>
 
 
<script>
        $("#box").mouseenter(function () {
		$("#interieur").fadeTo("slow",0.5);
        }); 
 
 
 
</script>
 </body>
</html>

Comment fait t'on pour que lorsqu'on sort de la box on revient à la couleur initiale ?
merci d'avance pour la réponse

07/08/2012, 10h36
NoSmoking
Bonjour,
ta curiosité ne t'a pas amener à tester
Code:

1 2 3 $("#box").mouseleave(function(){ $("#interieur").fadeTo("slow",0); });
;)

Merci de ta réponse nosmok :)

j'ai essayer ceci

Code:

1
2
3
4
5
6
7
8
9
 
<script>
        $("#box").mouseenter(function () {
		$("#interieur").fadeTo("slow",0.5);
        }); 
        $("#box").mouseleave(function () {
		$("#interieur").fadeTo("slow",0.5);
        });      
</script>

ca fonctionne avec moussenter mais mousseleave ca ne revient pas comme avant

07/08/2012, 23h18
NoSmoking

dans l'action mouseleave il te faut remettre la valeur à 0

Code:

$("#interieur").fadeTo("slow",0);

comme écrit plus haut.