Fading entre deux images dans deux balises différentes

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

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 :

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 :

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 :

$('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 :

$('#m-acceuil')

Code :

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 :

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 :

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

[Storming]

J'avance de problème en problème je dois faire une erreur à quelque part,
j'ai fait une vidéo pour que l'on puisse mieu voir le problème,
deux choses étranges:
Les images over empèchent le passage de la sourir car ils forment comme un calque au-dessus de l'image qui doit être survolée et l'autre c'est que les images après le fedout changent de positions.

Voilà la vidéo:

YouTube

YouTube

[danielhagnoul]

Bonsoir

FAQ jQuery : Pourquoi ma fonction hover() provoque-t-elle un va-et-vient ?

Code :

1
2
3
4
5
6
7
8
9
10
11
$('#m-acceuil').mouseenter(function(){
	$("img", this).fadeOut(250, function(){
		$('li.item-435').fadeIn(250);
	});
});
 
$('li.item-435').mouseleave(function(){
	$(this).fadeOut(250, function(){
		$("img", '#m-acceuil').fadeIn(250);
	});
});

Nota bene : $("#m-acceuil").find("img") est l'équivalent de $("img", '#m-acceuil') et c'est plus rapide, car avec la seconde écriture c'est jQuery qui doit faire le travail en interne.