ToggleClass animar jQuery?

Question

que tienen una sección en mi sitio web que cuando un usuario hace clic me gustaría que se expanda, estoy usando para este toggleClass de la jQuery ...

expandable: function(e) { 
    e.preventDefault(); 
    $(this).closest('article').toggleClass('expanded', 1000); 
} 

Esto está trabajando muy bien, solamente me gustaría para animarlo de alguna manera. En Chrome mi artículo crece lentamente al nuevo tamaño, solo en Firefox se "cambia el tamaño" instantáneamente sin animación, ¿hay alguna forma de tener este animado?

Answer 1

jQuery UI extiende el jQuery nativa toggleClass a tomar un segundo parámetro opcional: duration

toggleClass(class, [duration]) 

Docs + DEMO

Answer 2

.toggleClass() no se animará, debe ir por el método slideToggle() o .animate().

Answer 3

Debería mirar la función toggle que se encuentra en jQuery. Esto le permitirá especificar un método de aceleración para definir cómo funciona el alternar.

slideToggle solo se deslizará hacia arriba y hacia abajo, no hacia la izquierda/derecha si eso es lo que está buscando.

Si necesita la clase para ser fijada, así que puede deifine que en la función toggle con un:

$(this).closest('article').toggle('slow', function() { 
    $(this).toggleClass('expanded'); 
}); 

Answer 4

debería haber comprobado, una vez incluí la Biblioteca de interfaz de usuario jQuery funcionó bien y fue animando. ..

Answer 5

simplemente Puede usar transiciones CSS, consulte this fiddle

.on { 
color:#fff; 
transition:all 1s; 
} 

.off{ 
color:#000; 
transition:all 1s; 
} 

Answer 6

he tratado de utilizar el método toggleClass a ocultar un elemento en mi sitio (usando la visibilidad: oculto en contraposición a mostrar: ninguno) con una ligera animación, pero por alguna razón la animación no funcionaría (posiblemente debido a una versión anterior de jQuery UI).

La clase se eliminó y se agregó correctamente, pero la duración que agregué no pareció hacer ninguna diferencia: el elemento simplemente se agregó o eliminó sin ningún efecto.

Así que para resolver este utilicé una segunda clase en mi método de palanca y se aplica una transición CSS lugar:

El CSS:

.hidden{ 
    visibility:hidden; 
    opacity: 0; 
    -moz-transition: opacity 1s, visibility 1.3s; 
    -webkit-transition: opacity 1s, visibility 1.3s; 
    -o-transition: opacity 1s, visibility 1.3s; 
    transition: opacity 1s, visibility 1.3s; 
} 
.shown{ 
    visibility:visible; 
    opacity: 1; 
    -moz-transition: opacity 1s, visibility 1.3s; 
    -webkit-transition: opacity 1s, visibility 1.3s; 
    -o-transition: opacity 1s, visibility 1.3s; 
    transition: opacity 1s, visibility 1.3s; 
} 

El JS:

function showOrHide() { 
     $('#element').toggleClass("hidden shown"); 
    } 

Gracias @ tomas.satinsky para la increíble (y súper simple) respuesta en this post.