Il y a actuellement 80 visiteurs
Mardi 27 Juillet 2021
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

probleme fonction fadein (jquery)

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

probleme fonction fadein (jquery)

Message le 25 Oct 2010 13:55

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
Code: Tout sélectionner
<!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>
      


CSS
Code: Tout sélectionner
#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
atchoum17
Visiteur
Visiteur
 
Messages: 1
Inscription: 25 Oct 2010 13:45
 


Re: probleme fonction fadein (jquery)

Message le 28 Oct 2010 09:37

Tu aurais cette page sur une url pour voir comment cela s'affiche ?
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3376
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 

Re: probleme fonction fadein (jquery)

Message le 28 Oct 2010 09:52

Code: Tout sélectionner
<ul id="menus" class="menu">
<li> a herf="#">Accueil</a> </li>
<li><a href="#">Mes pages</a>
    <ul class="sous_menu'>
        <li><a href="#">page 1</a></li>
        <li><a href="#">page 2</a></li>
        <li><a href="#">page 3</a></li>
    </ul>
</li>
<li><a href="#">Mes sites</a>
    <ul class="sous_menu'>
        <li><a href="#">site 1</a></li>
        <li><a href="#">site 2</a></li>
        <li><a href="#">site 3</a></li>
    </ul>
</li>
<li><a href="#">Autres menu 1</a></li>
<li><a href="#">Autres menu 2</a></li>
</ul>



Coté Jquery
Code: Tout sélectionner
$(document).ready(function(){
    $(".menu > li > a").bind("click", function(){
        $('.sous_menu').fadeOut();
        $(this).parent().find('.sous_menu').fadeIn();
    }
})
Ne pas faire demain ce que tu peux faire aujourd'hui !!!
Image
Avatar de l'utilisateur
webdesigner
PC-Infopraticien
PC-Infopraticien
 
Messages: 3376
Inscription: 13 Aoû 2008 13:46
Localisation: Vernou la Celle sur Seine
 



Sujets similaires

Message probleme ecran en veile et ordi qui tourne
jai un probleme avec mon ordi de bureau tout tourne normalement lecran marche bien et quelque jours apres en le ralument lecran reste en veil et lordi tourne bien en le demontent jai toucher un peut la carte graphique jai ralumer lordie et la sa a marcher mais quelques jours apres rebelote ecrant en ...
Réponses: 5

Message probleme age of empires 3 sur steam
Salut tout le monde depuis quelque temps lorsque je joue sur Steam avec age of empire 3 définitive édition pendant le jeu aléatoirement le jeu plante comme si ma carte graphique était soit défaillante, soit le processeur car le jeu est souvent assez lent voici le type de message que j'ai avant que t ...
Réponses: 4

Message Problème d’affichage 2e écran et tablette graphique
Bonjour à tous,Le problème est le suivant, j?ai besoin de travailler sur 2 écrans et sur une tablette graphique, le câble de mon 2e écran est en HDMI et ma tablette également. Ne possédant qu?une connectique en HDMI sur ma tour j?ai donc acheté un adaptateur HDMI pour double HDMI histoire de faire f ...
Réponses: 0

Message Lenovo yoga problème écran tactile fausses pressions
Bonjour à tous!Je possède un lenovo yoga qui a commencé à bugger depuis quelques mois... L'écran détecte des pressions de partout alors que j'y touche pas comme dans cette vidéo: https://www.youtube.com/watch?v=NKnI4hhyUqg Même si je redémarre le pc, ça recommence, le pc n'est pas en surchauffe (ça ...
Réponses: 11

Message Problème avec cette dernière mise à jour
J'essaie d'installer cette nouvelle mise à jour Windows critique depuis quelques jours maintenant et je continue à rencontrer le même problème, étant donné que cela ne le fait pas.Je vais donc installer les mises à jour et j'obtiens : Mise à jour des fonctionnalités vers Windows 10, version 20H2 Ins ...
Réponses: 3

Message Problème de micro
Bonjour à tous,Dernièrement, le micro de m webcam sur zoom ne fonctionnait pas. D'ou pourrit venir le problème?Avec les derniers Windows je ne sais même plus ou aller pour tester le micro de ma webcam. Je me souviens qu'à l'époque de skype ou msn je pouvais aller dans le menu Windonws qqprt pour fai ...
Réponses: 2

Message Pc portable samsung R730/ CM démarre/VGA ok/LCD probleme
Bonjour, Voila j'expose mon problème, J'ai un vieux PC portable samsung NP-R730 que j'ai voulu remettre en état. le problème s'est l'affichage de l'écran principale, je m'explique, la carte mère démarre sans problème et fonctionne parfaitement branché sur VGA sur un écran externe, en revanche rien o ...
Réponses: 3


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


.: Nous contacter :: Flux RSS :: Données personnelles :.