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:
- Anima suavemente entre rojo y azul.
- No hay animación 'sobrecargando' cuando el usuario mueve su mouse rápidamente dentro y fuera del div.
- 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 getClassContent
solo 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.
getClassContent
es