jQuery fade e opacity su 2 div

[-AA-]

ho questo "pezzo" di codice

<script type='text/javascript'>
$(document).ready(function(){
$("#first").hover(
	function() {
	$(this).stop().animate({"opacity": "1"}, "slow");
	},
	function() {
	$(this).stop().animate({"opacity": "0"}, "slow");
	}); 
});
</script>

e... il suo html

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

[*]
<div id="first">testo per l'evento</div>
<div id="second">[img]upload/eventi/01.jpg[/img]</div>

I problemi sono che :

lo script in questione funziona solo sul primo LI ..
Inoltre il DIV FIRST al loadin della pagina non dovrebbe vedersi (sono 2 div uno sopra l'altro)

qualche consiglio?

[Xinod]

ci sara' un motivo se si chiama id, cioe' identificativo, no?
non puoi avere elementi diversi con lo stesso id.

[simo_JQ]

Come detto dall'amico qui sopra non c possono essere elementi con lo stesso ID in una pagina...
sostituisci i tuoi ID con delle classi. (ricordandoti di cambiare il selettore da # a .)

Così al caricamento i DIV con class First saranno invisibili.

<script type='text/javascript'>
$(document).ready(function(){
$(".first").css("opacty","0");
$(".first").hover(
	function() {
	$(this).stop().animate({"opacity": "1"}, "slow");
	},
	function() {
	$(this).stop().animate({"opacity": "0"}, "slow");
	}); 
});
</script>