Märklig sak med hover-funktion i Jquery

Hej alla,

Jag vill skapa en effekt när man för musen över en länkad bild och när musen tas bort från bilden/länken så försvinner effekten. För mig låter det som en enkel sak att göra men det vill sig inte riktigt.

Här har ni en sida med samma typ av funktion som jag vill ha:

http://themes.mysitemyway.com/infocus/gallery/portfolio/

Min kod för jQuery:

$(".zoom-startpack a").hover(
	function(){
		$(".zoomstartpackhover").fadeTo(360,0.5);
	},
	function(){
		$(".zoomstartpackhover").fadeTo(360,0);
});

Koden för själva sidan ser ut så här:

<span class="zoomstartpackhover"></span>
<div class="zoom-startpack">
<a href="startpack.jpg" rel="prettyPhoto"><img src="startpack-small.jpg"></a>
</div>

Vad som händer är att "zoomstartpackhover" som till en början inte är synlig fadas till 0.5. Snabbt därefter så fadas den till 0 utan att jag rör musen. Sen går det inte göra om funktionen utan att behöva ladda om sidan.

Mycket märkligt tycker jag - men det kanske finns en förklaring?

Det är ju inte konstigt, nu vet jag inte vad du ha för CSS men jag gissar på att din klass skall markera över din div.zoom-startpack, när den renderas så fadar den in och fadas ut för att span elementet kommer ovanför ditt a element som i sin tur kör hoverout och bara döljer visibility när du kör fadeTo. Vad deras skript som du länkar till gör är att den bara ändra alpha kanalen på bilden och visar vad som finns i bakgrunden. de verkar inte binda sitt event på a-elementet heller då span:en verkar triggar eventet.

Men hur fadar dem ner en alpha?

fadeTo() gör det åt dig med jquery, men då få leta upp rätt element och lägga "något i bakgrunden" på a-elementet så det bli synligt.

Snyggt!

Fick till det riktigt bra.

$(".zoom-startpack a").hover(
	function(){
		$(this).find("img").fadeTo(360,0.5);
	},
	function(){
		$(this).find("img").fadeTo(360,1);
});