Menú animado con tres estados (jquery y css)

Hola, he estado probando este magnífico tutorial que te explica cómo hacer un menú con sprites usando jquery y css. Link del tutorial. Ahora me gustaría saber cómo puedo añadir un tercer estado en los botones del menú (estado 'activo'). De momento he añadido el tercer estado en el sprite del menú y uso el siguiente código para cambiar al tercer estado pero no queda el estado activo.

Código Javascript :

$(function(){
        $("ul#menu span").click(function() {
               
        /* turn on current item and animate to blablabla */
        $(this).addClass("active").animate({opacity:0.50}); 
                              
   });
   }); 

gracias por vuestra ayuda.

Dinki

imagino que la clase 'active' tiene esas propiedades...
si no es asi pss hace falta crear ese estilo.

.active{
opacity: 0,5;
}

si quieres que se quede... y luego deberás de quitar la clase cuando otro span haga la animación si no quedaran las dos marcadas..

esto con un: $(this).removeClass("active")

Lo siento pero no consigo que funcione.
Tengo el siguiente código:

Código Javascript :

$(document).ready(function(){
       
   $('#navigation li a').append('<span class="hover"></span>')
         
   $('#navigation li a').hover(function() {
           
       // Encima del botón
       $('.hover', this).stop().animate({
   'opacity': 1
   }, 700,'easeOutSine')
            
        },function() {
            
        // Fuera del botón
        $('.hover', this).stop().animate({
   'opacity': 0
   }, 700, 'easeOutQuad')
            
      })
});

$(document).ready(function(){

   $('#navigation li a').click(function(){
                                                $('#navigation li a').append('<span class=active"></span');
             $('.hover',this).stop().animate({'opacity':0});                        $('.active',this).stop().animate({'opacity':1});
                               });

});

Tengo los estilos css correctamente, pero no consigo que el botón quede activado.
¿Alguien me podría explicar qué es lo que hago mal?

Gracias

veras pss lo que sucede con darle opacidad en una clase es que puede que tome la clase pero como en el evento out (fuera) esta la animación para que tome la opacidad 1 pss simplemente va a hacer la animación y no obedecerá la clase..

[url=http://jsfiddle.net/animatk/enCCZ/][/url]

pero pasa exactamente lo que te digo, aunque la clase tiene la opacidad y un color pss el evento over dice que tome otra opacidad... (1) asi que descarta la de la clase!

Gracias,
el problema lo tenía con que tenía que aplicarle el "addClass" al span concrétamente. Yo le estaba aplicando a otro elemento y por eso no me funcionaba.

Muchas gracias a todos.

Jordi