debutant. fade hover effect. load page

bonjour :)

Je suis débutant, je réalise un blog pour une association de mon quartier sous la plateforme blogger.

J'ai découvert récemment les effets qu'on pouvait obtenir avec Jquery et donc avec l'aide d'un tuto, j'ai réalisé ma barre de navigation avec un effet de transition fade sur les boutons.

Le problème, c'est que des que je charge une page, toute la barre de navigation se met sur l'effet hover avant de revenir à la normale.
je vous met le blog en lien pour mieux me comprendre, suffit de cliquer sur les boutons de ma barre :
http://capquevilly.blogspot.com/

le script :

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
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
 
 
<!-- Let's do the animation -->
<script type='text/javascript'>
$(function() {
// set opacity to nill on page load
$(&quot;ul#menu span&quot;).css(&quot;opacity&quot;,&quot;0&quot;);
// on mouse over
$(&quot;ul#menu span&quot;).hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, &quot;normal&quot;);
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, &quot;normal&quot;);
});
});
</script>

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* Menu Body */
	ul#menu {                	
		list-style:none;
                margin:-46px -30px ;
 
 
}
 
	/* Float LI Elements - horizontal display */
	ul#menu li {
		float:left;
	}
 
	/* Link - common attributes */
	ul#menu li a {
		background:url(<a href="http://nsm03.casimages.com/img/2010/07/03//100703112115408686339577.jpg" target="_blank">http://nsm03.casimages.com/img/2010/...8686339577.jpg</a>) no-repeat scroll top left;
		display:block;
		height:42px;
		position:relative;
	}
 
	ul#menu li a.home {
		width:114px;
	}
 
	ul#menu li a.asso {
		width:129px;
		background-position:-114px 0px;
	}
 
	ul#menu li a.galerie {
		width:113px;
		background-position:-243px 0px;
	}
 
        ul#menu li a.adhesion {
		width:131px;
		background-position:-356px 0px;
	}
        ul#menu li a.contact {
		width:112px;
		background-position:-487px 0px;
	}
	/* Span (on hover) - common attributes */
	ul#menu li a span {
		background:url(<a href="http://nsm03.casimages.com/img/2010/07/03//100703112115408686339577.jpg" target="_blank">http://nsm03.casimages.com/img/2010/...8686339577.jpg</a>) no-repeat scroll bottom left;
		display:block;
		position:absolute;
		top:0;
		left:0;
		height:42px;
		width:100%;
		z-index:100;
	}
 
	/* Span (on hover) - display pointer */
	ul#menu li a span:hover {
		cursor:pointer;
	}
 
	ul#menu li a.home span {
		background-position:0px -42px;
	}
 
	ul#menu li a.asso span {
		background-position:-114px -42px;
	}
	ul#menu li a.galerie span {
		background-position:-243px -42px;
	}
        ul#menu li a.adhesion span {
		background-position:-356px -42px;
	}
        ul#menu li a.contact span {
		background-position:-487px -42px;
	}

bon voila en gros, je suis plus un bidouilleur qu'autre chose, si quelqu'un voit une solution, merci d'avance, je continue à chercher de toute façon :ccool: