no hace falta ponerle un id a cada li
no hace falta ocultar ".hide()" los li con jquery si con css lo podés hacer y sin usar clase si lo que buscas es ocultar todos
igual si queres aplicar hide() a varios elementos podes seleccionar todos y aplicar hide, por ej:
$('div.algunaClase, h1, #algunid, a').hide();
mouseenter y mouseleave es igual que hacer un
hover(funcionEntrar, funcionSalir)
y en vez de seleccionar cada una de los item de la lista por id te conviene seleccionar todos los item de una lista con id, por ej:
$('#miLista li').hover y para aceder al span usas this (que va a ser tu li donde hacen mouseover) $(this).find('span').fadeIn('fast'); pero antes de pasar al span podés aplicar la clase al item y luego buscar el span, quedaría:
$(this).addClass('change-back').find('span').fadeIn('fast');
para el mouseout es similar nada mas que elimins la clase y haces fadeout
Código HTML:
<html>
<head>
<title>Ejemplo</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#miLista li').hover( function (){
$(this).addClass('change-back').find('span').fadeIn('fast');
}, function (){
$(this).removeClass('change-back').find('span').fadeOut('fast');
});
});
</script>
<style>
#miLista>li>span{display:none}
.change-back{color:red}
</style>
</head>
<body>
<ul id="miLista">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
</ul>
</body>
</html>
Con eso por mas que agregues 500 item va a funcionar igual