javascript - how - removeclass css jquery

animar addClass/removeClass con jQuery

Question

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 se acerca.

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

Una alternativa es usar addClass() y removeClass() pero no he podido recrear el comportamiento exacto que puedo obtener con 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 ''cola de impresión'' cuando el usuario mueve su mouse rápidamente dentro y fuera de la div.
3. Si el usuario mueve el mouse hacia afuera o hacia adentro mientras la animación aún se está reproduciendo, se facilita correctamente entre el estado actual "a mitad de camino" y el nuevo estado "objetivo".

Pero como los cambios de estilo están definidos en animate() , tengo que cambiar los valores de estilo allí y no puedo simplemente apuntar a mi hoja de estilo. Esta "fragmentación" de donde 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 la animación funcione, 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 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, aún no ha agregado la nueva clase, por lo que con esta solución el color salta al color anterior cuando el usuario mueve su 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 en todas partes, sino que puedo mantenerlas en clases en mi hoja de estilo.

Answer 1

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 el evento finalice. Sin embargo, usar la combinación correcta de parámetros con la función debería ayudar. p.ej. detener (verdadero, verdadero) o detener (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 en qué se diferencian 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 que no pueden usar JqueryUI / necesitan soportar IE7 y 8 también.

Answer 2

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 convierte instantáneamente el color de fondo a # 5eb4fc y luego se desvanece lentamente a la normalidad durante 2 segundos.

Aquí hay un fiddle

Answer 3

Otra solución (pero requiere jQueryUI como lo señaló 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);

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

Answer 4

Podrías usar el switchClass jquery ui, switchClass un ejemplo:

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

O ver este jsfiddle .

Answer 5

Solo necesitas el jQuery UI effects-core (13KB), para habilitar la duración de la adición (como lo señaló Omar Tariq)

Answer 6

Ya que no estás 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;
}