Problema con Menú, hover y click.

[chuekeron]

Buenas gente, tengo un menú con un efecto hover... que aplico mediante javascript.

Código HTML:

<ul id="menu">
  <li><span></span><a href="#">Botón 1</a></li>
  <li><span></span><a href="#">Botón 2</a></li>
  <li><span></span><a href="#">Botón 3</a></li>
</ul>
 

Código Javascript:

$('#menu li').hover(function() {
    $('a',this).css("color","#FFF"); 
    $('span',this).animate({width: "190px"}, 250); 
}, function() {
    $('a',this).css("color","#4D545E");
    $('span',this).animate({width: "0px"}, 250); 
});
 

Hasta aca todo bien, funciona. El tema esta en que quiero hacer que cuando se hace click en una de las opciones, dicho botón quede activo.
Intente con addClass(), not() y demás sin tener éxito. Todos los botones iban quedando pulsados a medida que hacia click en cada uno de ellos, obviamente la idea es que esto se aplique solo al ultimo click y el efecto hover siga funcionando para el resto de los botones... alguna idea?

[AlejandroGalvez]

Esto es algo que puedes hacer fácilmente con CSS utilizando la propiedad transition para darle suavidad al efecto. Siempre es preferible utilizar CSS que jQuery. Una vez dicho esto, la posible solución a tu click es utilizar removeClass en primer lugar y luego el addClass:

Código Javascript:

$('#menu li').click( function() {
    $('#menu li').removeClass("activo"); 
    $(this).addClass("activo"); 
});
 

Más o menos esa es la idea, aunque sin ver tu código referente al evento click y el css para encender los botones poco más puedo corregirte. Nos has mostrado el código que en principio no interesa para resolver tu problema =P.

[chuekeron]

Iniciado por AlejandroGalvez

Esto es algo que puedes hacer fácilmente con CSS utilizando la propiedad transition para darle suavidad al efecto. Siempre es preferible utilizar CSS que jQuery. Una vez dicho esto, la posible solución a tu click es utilizar removeClass en primer lugar y luego el addClass:

Código Javascript:

$('#menu li').click( function() {
    $('#menu li').removeClass("activo"); 
    $(this).addClass("activo"); 
});
 

Más o menos esa es la idea, aunque sin ver tu código referente al evento click y el css para encender los botones poco más puedo corregirte. Nos has mostrado el código que en principio no interesa para resolver tu problema =P.

Entiendo lo que decis, pero la verdad es que vengo manejando todos los eventos con jQuery y me gustaría seguir así.

Con respecto a los estilos, lo que hago es darle las propiedades css al elemento que le asigno la clase mediante jQquery:

Código CSS:

#menu li span {
    background-color: #0DA3FD;
    height: 25px;
    width: 0px;
}
 
#menu li a{
    color: #0DA3FD;
}
 
#menu .activo span {
    width: 100%;
}
 
#menu .activo a {
    color: #FFFFFF;
}
 

Y el javascript:

Código Javascript:

$('#menu li').not(".activo").hover(function() {
        $('a',this).css("color","#FFF"); 
        $('span',this).animate({width: "190px"}, 300); 
    }, function() {
    $('a',this).css("color","#4D545E");
        $('span',this).animate({width: "0px"}, 250); 
    });
        
    $('#menu li').click(function() {
        $('#menu li').removeClass("activo"); 
        $(this).addClass("activo"); 
    });
 

Así no funcionan los estilos que le asigno a la clase "activo" para q el botón quede pulsado. Y si hago lo siguiente:

Código Javascript:

$('#menu li').hover(function() {
        $('a',this).not(".activo a").css("color","#FFF"); 
        $('span',this).not(".activo span").animate({width: "190px"}, 300); 
    }, function() {
    $('a',this).not(".activo a").css("color","#4D545E");
        $('span',this).not(".activo span").animate({width: "0px"}, 250); 
    });
    
    $('#menu li').click(function() {
        $('#menu li').removeClass("activo"); 
        $(this).addClass("activo"); 
    });
 

...van quedando todos los botones pulsados : (