jquery animacja do min-height lub auto

Question

Mam kilka rzeczy jquery tutaj, aby animować warstwę na kliknięcie. Problem czasem jest taki, że zawartość może przekraczać wysokość przydzieloną w ustawieniu wysokości. Czy istnieje sposób modyfikacji tego, aby animować warstwę do minimalnej wysokości lub automatycznie zamiast ustawionej ilości pikseli?

$(function() { 
    $(".showcart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "200px" }, "fast"); 
    }); 
    $(".hidecart").click(function(){ 
     $("#cart").animate({ height: "250px" }).animate({ height: "0px"}, "fast"); 
    }); 
}); 

Answer 1

Niestety nie, nie możesz powiedzieć, żeby po prostu ożywić to, co pasuje. Aby to zrobić, musisz albo znać odpowiedni rozmiar, albo mieć sposób na jego obliczenie.

Jeśli wszystko dzieje się w ramach jednej funkcji lub pojedynczej wtyczki, warto rozważyć zapisanie wartości $(this).height() w zmiennej gdzieś przed jej rozwinięciem, dzięki czemu będziesz w stanie umieścić ją z powrotem tam, gdzie kiedyś być.

W przeciwnym razie jedną z możliwości może być umieszczenie elementu div wewnątrz tego, który ma zostać powiększony/zmniejszony, i użycie get $('> div', $(this)).height(), aby uzyskać wysokość div, która jest w środku, która powinna być wysokością zawartości w nim, bez względu na to, ile bałagan z zewnętrzną wysokością div.

Answer 2

Jest to dość trudne, ponieważ zależy w dużej mierze od struktury strony. Jeśli możesz ustawić css min-height lub uzyskać wysokość innego elementu jako punktu odniesienia, możesz animować do tego rozmiaru, dzięki czemu rzeczy będą nieco bardziej dynamiczne. Niestety w metodzie jQuery nie ma metody zmiany wielkości magii automatycznej.

$(this).css("min-height"); //Gets min-height CSS property 

// or.. 

$(this).height(); //Gets element height 

Nadzieję, że pomaga.

Answer 3

Okazało się, że można po prostu to zrobić:

$("#cart").animate({ 'min-height': "250px" }, 'fast'); 

Cytaty są kluczem rzeczą tutaj.