JQuery fadeIn() en hover()

Bonsoir,
Je fais mes premiers scripts en jQuery et je souhaite qu'un élément p apparaisse lors du survol d'un élément h4 frère :

$("#h4-stratégie").hover(function(){
$("#p-stratégie").fadeIn("fast")
},
$("#p-stratégie").fadeOut("fast")
)

<div id="accueil">
<div id="activités">
<div class="activ-div">
<h4 id="h4-stratégie">Blablabla</h4>
<p id="p-stratégie">Blablabla</p>
</div>
</div>
</div>

#activités p#p-stratégie{opacity:0.0;}
#activités p#p-communication{opacity:0.0;}
#activités p#p-internet{opacity:0.0;}

Qu'est ce qui cloche dans mon script ? Merci d'avance !

Salut tu peux t'insipirer de ça :

	<script type="text/javascript">

	$(document).ready(function AfficherCacher()
	{
		$('#p-strategie').hide();
		$('#h4-strategie')
		.mouseenter(function Afficher()
		{
			$('#p-strategie').fadeIn(400)

		}).mouseleave(function Cacher()
		{
			$('#p-strategie').fadeOut(400)
		})

	})
	
	</script>


	<div id="accueil">
		<div id="activites">
			<div class="activ-div">
				<h4 id="h4-strategie">Mon titre</h4>
				<p id="p-strategie">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
					tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
					quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
					consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
					cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
					proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>
		</div>

Salut,

Voici ce que je peux te proposer :

$('#p-stratégie').hide();
$('#h4-stratégie').hover(function(){
        $('#p-stratégie').fadeIn();
    }, function(){
        $('#p-stratégie').fadeOut();
});

En espérant t'avoir aidé.

PS: si tu souhaites cacher des éléments fait le plutôt en jquery car si tu le fais en CSS, si on désactive javascript plus rien n'est visible.
Modifié par Gili (03 Oct 2012 - 14:20)

J'ai pris un peu de chacun de vous :

$(document).ready(function AfficherCacher()
	{
  $('#p-stratégie').hide();
  $('#h4-stratégie').hover(
    function(){$('#p-stratégie').fadeIn(400);},
    function(){$('#p-stratégie').fadeOut(400);}
    );
  });
  
AfficherCacher();

Par contre, opacity était justement la source de mon problème. Mais je ne comprends pas pourquoi. J'avais justement mis cette propriété après avoir vu dans la doc jQuery que FadeIn/FadeOut jouait sur l'opacité et qu'il s'agissait donc de la même propriété CSS... Une question de priorité ?

$(document).ready sert à lancer une fonction au moment ou le navigateur à fini de préparer le document, ici tu déclenche la fonction manuellement avec AfficherCacher().

Si tu as besoin de pouvoir utiliser la fonction manuellement (bouton, etc...), il faut faire comme ceci:

function AfficherCacher()
{
  $('#p-stratégie').hide();
  $('#h4-stratégie').hover(
    function()
    {
      $('#p-stratégie').fadeIn(400);
    },
    function()
    {
      $('#p-stratégie').fadeOut(400);
    }
  );
}
$(document).ready(AfficherCacher);

de cette manière, ta fonction est bien créé et nommée (tu peut donc l'utiliser manuellement au besoin), et elle sera exécuté une fois la page chargée.
Modifié par JJK801 (04 Oct 2012 - 09:57)

Ok merci pour ces précisions ! Comme j'apprends ce framework plutôt en autodidacte, ce genre de précision m'est bien utile !

La meilleur façon d'apprendre c'est de lire les docs et de faire des recherches sur google dès que tu ne comprends pas quelquechose (c'est long certes mais plus tu apprends moins tu en a à apprendre ^^)