En jQuery, ¿cómo puedo animar la propiedad de CSS de "altura máxima"?

Question

puedo animar fácilmente a la propiedad "opacidad"

$("#blah").animate({ opactiy: 0.5}, 1000); 

¿Cómo puedo animar el max-height propiedad CSS ... ejemplo:

$("#blah").animate({ "max-height": 350}, 1000); 

(pista, que el código no funciona)

EDIT: Para contestar las siguientes preguntas:

1. Hay varias imágenes todo de clase CSS "bla"
2. Las imágenes son de tamaños al azar, pero todos ellos tienen max-height: 100px
3. Cuando un usuario se desplaza sobre una imagen, lo quiero para animar al máximo -esta altura (por lo tanto, sin restricciones de la altura)

Answer 1

OK, entonces no hay forma de hacer lo que yo quería ... Así que tuve que hacer que mi propia función tuviera la función de "animación" genérica (de x a y en milisegundos d) .

me escribió una entrada de blog que describe cómo lo hice aquí: Generic "Animate" function with jQuery

Incluí una demostración de lo que puede hacer así. El enlace de demostración se encuentra en la parte inferior del artículo o, para los impacientes, puede hacer clic en here.

Answer 2

Creo que primero debe animar la propiedad de altura y cuando termine la animación, reemplace la altura establecida en automático y restablezca la altura máxima a la que necesita. :

$("#blah").animate({ "height": 350}, 1000, function(){ 
    $(this).css('height','auto').css('max-height',350); 
}); 

Answer 3

Estoy confundido por el requisito aquí. Si desea animar algo, presumiblemente debe ser igual a la altura máxima. Haría un enunciado para verificar que la altura de un elemento sea igual a su altura máxima; si es así, elimine la altura máxima y luego anime la altura. Debe ser el mismo efecto

Answer 4

Esta pregunta se está haciendo un poco vieja, pero así es como lo resolví usando jQuery básico, en caso de que alguien más necesite una solución simple.

En mi caso, tengo una lista de entradas de blog que primero se procesan en la página con un max-height que solo muestra las primeras 4 líneas de texto, el resto es overflow: hidden. Tengo un botón para expandir/colapsar que alterna el artículo de su forma contraída a expandido (completamente visualizado) y viceversa.

Al principio intenté animar la propiedad de altura máxima directamente y, como has descubierto anteriormente, esto no funcionará. También probé esto con transiciones CSS con el mismo resultado decepcionante.

También intenté configurarlo en un número muy grande como '1000em', pero esto hizo que las animaciones se vieran tontas ya que literalmente se estaba interpolando a un valor tan grande (como era de esperar).

Mi solución utiliza scrollHeight, que se utiliza para determinar la altura natural de cada historia una vez que se carga la página de la siguiente manera:

$(function(){ // DOM LOADED 

    // For each story, determine its natural height and store it as data. 
    // This is encapsulated into a self-executing function to isolate the 
    // variables from other things in my script. 
    (function(){ 

    // First I grab the collapsed height that was set in the css for later use 
    var collapsedHeight = $('article .story').css('maxHeight'); 

    // Now for each story, grab the scrollHeight property and store it as data 'natural'   
    $('article .story').each(function(){ 
     var $this = $(this); 

     $this.data('natural', $this[0].scrollHeight); 
    }); 

    // Now, set-up the handler for the toggle buttons 
    $('.expand').bind('click', function(){ 
     var $story = $(this).parent().siblings('.story').eq(0), 
      duration = 250; // animation duration 

     // I use a class 'expanded' as a flag to know what state it is in, 
     // and to make style changes, as required. 
     if ($story.hasClass('expanded')) { 
     // If it is already expanded, then collapse it using the css figure as 
     // collected above and remove the expanded class 
     $story.animate({'maxHeight': collapsedHeight}, duration); 
     $story.removeClass('expanded'); 
     } 
     else { 
     // If it is not expanded now, then animate the max-height to the natural 
     // height as stored in data, then add the 'expanded' class 
     $story.animate({'maxHeight': $story.data('natural')}, duration); 
     $story.addClass('expanded'); 
     } 
    }); 

    })(); // end anonymous, self-executing function 

}); 

a hacer lo mismo con las imágenes, sólo les envuelva en una combinación externa div, que es en lo que configurará max-height y overflow:hidden, tal como utilicé div.story anteriormente.

Answer 5

solución CSS puro

HTML

<div>max-height element</div> 

css

div { 
    max-height:20px; 
    overflow:hidden; 

    -moz-transition: 1s; 
    -ms-transition: 1s; 
    -o-transition: 1s; 
    -webkit-transition: 1s; 
    transition: 1s;} 

div:hover { 
    max-height:300px} 

DEMO

disfrutar!

Answer 6

Me encontré con lo mismo.

La respuesta es utilizar "maxHeight" en lugar de "max-height" ...