animando addClass / removeClass con jQuery

Estoy usando jQuery y jQuery-ui y quiero animar varios atributos en varios objetos.

Para explicar el problema aquí, lo he simplificado a un div que cambia de azul a rojo cuando el usuario pasa el mouse sobre él.

Puedo obtener el comportamiento que quiero cuando uso animate(), sin embargo, al hacerlo, los estilos que estoy animando deben estar en el código de animación y, por lo tanto, están separados de mi hoja de estilos. (ver ejemplo 1 )

Se está utilizando una alternativa addClass()y removeClass()no he podido recrear el comportamiento exacto con el que puedo obtener animate(). (ver ejemplo 2 )

Ejemplo 1

Echemos un vistazo al código que tengo con animate():

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( {backgroundColor:'blue'}, {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( {backgroundColor:'red'}, {duration:500});
  });

Muestra todos los comportamientos que estoy buscando:

1. Anima suavemente entre rojo y azul.
2. No hay animación 'sobrecargando' cuando el usuario mueve su mouse rápidamente dentro y fuera del div.
3. Si el usuario mueve su mouse hacia afuera / adentro mientras la animación aún se está reproduciendo, se alivia correctamente entre el estado actual 'a mitad de camino' y el nuevo estado 'objetivo'.

Pero dado que los cambios de estilo están definidos animate(), tengo que cambiar los valores de estilo allí, y no puedo hacer que apunte a mi hoja de estilo. Esta "fragmentación" de dónde se definen los estilos es algo que realmente me molesta.

Ejemplo 2

Aquí está mi mejor intento actual usando addClass()y removeClass(tenga en cuenta que para que funcione la animación necesita jQuery-ui):

//assume classes 'red' and 'blue' are defined

$('#someDiv')
  .addClass('blue')
  .mouseover(function(){
    $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500});
  })
  .mouseout(function(){
    $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500});
  });

Esto exhibe la propiedad 1. y 2. de mis requisitos originales, sin embargo, 3 no funciona.

Entiendo la razón de esto:

Al animar addClass()y removeClass()jQuery agrega un estilo temporal al elemento, y luego incrementa los valores apropiados hasta que alcanzan los valores de la clase proporcionada, y solo entonces realmente agrega / elimina la clase.

Debido a esto, tengo que eliminar el atributo de estilo, de lo contrario, si la animación se detiene a la mitad, el atributo de estilo permanecerá y sobrescribirá permanentemente cualquier valor de clase, ya que los atributos de estilo en una etiqueta tienen mayor importancia que los estilos de clase.

Sin embargo, cuando la animación está a mitad de camino, todavía no ha agregado la nueva clase, por lo que con esta solución, el color salta al color anterior cuando el usuario mueve el mouse antes de que se complete la animación.

Lo que quiero idealmente es poder hacer algo como esto:

$('#someDiv')
  .mouseover(function(){
    $(this).stop().animate( getClassContent('blue'), {duration:500});
  })
  .mouseout(function(){
    $(this).stop().animate( getClassContent('red'), {duration:500});
  });

Donde getClassContentsolo devolvería el contenido de la clase proporcionada. El punto clave es que de esta manera no tengo que mantener mis definiciones de estilo por todas partes, pero puedo mantenerlas en clases en mi hoja de estilo.

Dado que no está preocupado por IE, ¿por qué no usar transiciones CSS para proporcionar la animación y jQuery para cambiar las clases? Ejemplo en vivo: http://jsfiddle.net/tw16/JfK6N/

#someDiv{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Otra solución (pero requiere jQueryUI como lo señala Richard Neil Ilagan en los comentarios):

addClass, removeClass y toggleClass también acepta un segundo argumento; La duración del tiempo para ir de un estado a otro.

$(this).addClass('abc',1000);

Ver jsfiddle: - http://jsfiddle.net/6hvZT/1/

Podrías usar jquery ui's switchClass, Heres un ejemplo:

$( "selector" ).switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" );

O vea este jsfiddle .

Solo necesita el jQuery UI effects-core (13KB), para permitir la duración de la adición (al igual que Omar Tariq señaló)

Estaba investigando esto, pero quería tener una tasa de transición diferente para entrar y salir.

Esto es lo que terminé haciendo:

//css
.addedClass {
    background: #5eb4fc;
}

// js
function setParentTransition(id, prop, delay, style, callback) {
    $(id).css({'-webkit-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-moz-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'-o-transition' : prop + ' ' + delay + ' ' + style});
    $(id).css({'transition' : prop + ' ' + delay + ' ' + style});
    callback();
}
setParentTransition(id, 'background', '0s', 'ease', function() {
    $('#elementID').addClass('addedClass');
});

setTimeout(function() {
    setParentTransition(id, 'background', '2s', 'ease', function() {
        $('#elementID').removeClass('addedClass');
    });
});

Esto cambia instantáneamente el color de fondo a # 5eb4fc y luego vuelve lentamente a la normalidad durante 2 segundos.

Aquí hay un violín

Aunque la pregunta es bastante antigua, estoy agregando información que no está presente en otras respuestas.

El OP está utilizando stop () para detener la animación actual tan pronto como se complete el evento. Sin embargo, usar la combinación correcta de parámetros con la función debería ayudar. p.ej. stop (verdadero, verdadero) o stop (verdadero, falso) ya que esto afecta bien a las animaciones en cola.

El siguiente enlace ilustra una demostración que muestra los diferentes parámetros disponibles con stop () y cómo difieren de finish ().

http://api.jquery.com/finish/

Aunque el OP no tuvo problemas al usar JqueryUI, esto es para otros usuarios que pueden encontrarse con escenarios similares pero no pueden usar JqueryUI / también necesitan admitir IE7 y 8.