probleme fonction fadein (jquery) (View Single Post)

atchoum17 · #1 25-10-2010, 18:14

bonjour à tous,
je viens d'inserer la fonction fadein (affichage en fondu) pour mon menu lors d'un simple passage sur mes liens. le souci est que le fadein ne fonctionne que lors du second survole de mes liens; bref sa ne marche pas du premier coup.
à mon avis cela viens de l'initialisation de la variable mais j'ai besoin de vous. voici mon code:

HTML avec la fonction fadein

HTML Code:

<!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>
       <title>le ciel de nuit</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
      <link rel="shortcut icon" type="image/x-icon" href="../graphisme/terre.ico" />
      <script type="text/javascript" src="jquery-1.3.1.min.js"></script>
      <script type="text/javascript">
var obj = null;

function checkHover() {
   if (obj) {
      obj.find('ul.niveau2').fadeOut(700);   
   }
}

$(document).ready(function() {
   $('#menu li.sous_menu').hover(function() {
      if (obj) {
         obj.find('ul.niveau2').fadeOut(700);
         obj = null;
      }
      
      $(this).find('ul.niveau2').fadeIn(700);
   }, function() {
      obj = $(this);
      setTimeout(
         "checkHover()",
         700); 
   });
});   
   


      </script>

   </head>
   <body>
   <div id="en_tete">
   <!-- Ici on mettra la bannière --><br /><br />
   </div>


   
   <div id="menu">
      <ul class="niveau1">
         <li><a href="index.html">accueil</a></li>
         <li class="sous_menu"><a href="#">mes pages</a>
            <ul class="niveau2">
               <li><a href="index.html">accueil</a></li>
               <li><a href="systeme_solaire_interne.html">système solaire interne</a></li>
               <li><a href="carte_du_ciel.html">carte du ciel</a></li>
            </ul>
         </li>
         <li class="sous_menu"><a href="#">mes sites web préférés</a>
            <ul class="niveau2">
                <li><a  href="http://www.planete-astronomie.com/__medias/Rotation/Rotation_Systeme_Solaire.swf">mouvement  des planètes</a></li>
               <li><a href="http://www.stelvision.com/carte-ciel/">carte de l'hemisphère nord</a></li>
               <li><a href="http://www.cieletespace.fr/">actualités de l'espace</a></li>
            </ul>
         </li>
      </ul>
   </div>

et mon css

HTML Code:

 #menu
{
   float: left;
   width: 120px;
   height:200px;
   margin-top:-17px;
}

#menu li
{
   background-color:white;
   padding-bottom:10px;
}

#menu li:hover
{
background-color:#99a0f4;
}

#menu ul
{
   width:120px;
   border:1px solid;
   padding:0;
}

#menu ul li
{
   position:relative;
   list-style:none;
   border-bottom:1px solid;
}

#menu ul ul
{
   position:absolute;
   left:120px;
   top:0;
   display:none;
}

#menu li a
{
text-decoration:none;
/*color:;*/
}

#menu li a:visited
{
text-decoration:none;
color:#fbc779;
}

#menu ul.niveau1 li.sous_menu:hover ul.niveau2
{
   display:block;
}

#menu li.sous_menu
{
   background-position:right;
   background-image: url(../graphisme/fdroite.gif);
   background-repeat: no-repeat;
   border-bottom: 1px solid;
}

merci d'avance