Discussion :

[Storming]

voilà mon problème:
J'ai besoin de faire un fading entre deux images pour mon menu,
Les premières images se trouvent dans des div et les secondes dans des li

voilà comment ça se présente:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="menu-fond">
      <div id="m-acceuil">
              <img src="/images/menus/fond-acceuil.jpg" border="0" />
       </div>
        <ul class="menu">
            <li class="item-435">
                   <a href="/" ><img src="/images/menus/over-acceuil.jpg" alt="Accueil" /></a>
             </li>
         </ul>   
</div>

Puis le css

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
 
.menu-fond {
 width:1054px;
 height:28px;
 background-image:url(images/fond-menu.jpg);
    position:relative;
}
.menu {
 position:absolute;
 top:0;
    left:0;
}
.menu li{
 display:none;
}
li.item-435 {
 width:120px;
 height:28px;
 float:left;
}
div#m-acceuil {
 width:120px;
 height:28px;
 float:left;
}

Et voilà ce que j'ai tenté avec jquery

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function () {
 
 $('div#m-acceuil').hover(function () {
 var li=$('li.item-435', this);
 li.fadeIn(250)
 }, function (){
 var li=$('li.item-435', this);
 li.fadeOut(550);
 });
});

Mais évidemment ça ne fonctionne pas.
Je suppose que le problème viens du fait qu'il ne situe pas : li.item-435

Merci d'avance du temps consacré.

[Bovino]

Manifestement, tu n'as pas pris le temps de lire les fondamentaux...

Code :

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

$('div#m-acceuil')

Pourquoi ce "div" au début ??? La seule chose que ça apporte est de compliquer le travail de récupération par jQuery, passer uniquement l'id en paramètre est la méthode la plus performante :

Code :

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

$('#m-acceuil')

Code :

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

var li=$('li.item-435', this);

Le second paramètre correspond au contexte dans lequel rechercher, or dans ton cas, this est l'objet survolé qui ne contient aucune balise <li> et donc à fortiori aucune ayant la classe "item-435"...

[Storming]

Merci de ta réponse j'ai donc modifié comme cela:

Code :

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

1
2
3
4
5
6
7
8
 
	$('#m-acceuil').hover(function () {
		var li=$('li.item-435');
		li.fadeIn(250)
	}, function (){
		var li=$('li.item-435');
		li.fadeOut(550);
	});

Cela fonctionne toutefois, il enchaîne le fadein et fadeout sans que je sorte la souris.
Saurais-tu d'ou vient mon erreur?

[SpaceFrog]

Code :

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

1
2
3
4
5
6
$('#m-acceuil').mouseenter(function () {
		var li=$('li.item-435');
		li.fadeIn(250)}).mouseleave( function (){
		var li=$('li.item-435');
		li.fadeOut(550);
	});

ou mouseover() mouseout()

[Bovino]

Spaffy : .hover() est un équivalent de .mouseenter() et .mouseleave() qui sont préférables à .mouseover() et .mouseout() car ils prennent en compte le survol d'une balise interne à celle sur laquelle est déclaré l'événement.
Le code de Storming, du moins ce qu'on en voit, est donc correct, le problème doit se situer ailleurs...

[Storming]

Petite précision:
à chaque mouvement de souris sur le menu le fadein fadeout recommence,
pourtant la taille de la div est définie et celle du li aussi.

Edit: il semblerais que j'ai un problème dans mes positions css, quand j'affiche normalement tout vas bien et quand j'utilise jquery tous les over de menus viennent se mettre tout à gauche