Chcę ożywić <div>
od 200px
do auto
wysokości. Jednak nie wydaje mi się, żeby to działało. Czy ktoś wie jak?
Oto kod:
$("div:first").click(function(){
$("#first").animate({
height: "auto"
}, 1000 );
});
javascript
jquery
html
css
jquery-animate
Daniel
źródło
źródło
Odpowiedzi:
Zapisz aktualną wysokość:
Tymczasowo przełącz wysokość na automatyczną:
Uzyskaj automatyczną wysokość:
Przełącz się z powrotem
curHeight
i animuj doautoHeight
:I razem:
źródło
.animated({height: autoHeight}, 1000, function(){ el.height('auto'); });
opacity: 0; position: absolute;
podczas pomiaru i usuwając go, gdy skończysz.IMO to najczystsze i najłatwiejsze rozwiązanie:
Wyjaśnienie: DOM już wie z początkowego renderowania, jaki rozmiar będzie miał rozwinięty element div po ustawieniu automatycznej wysokości. Ta właściwość jest przechowywana w węźle DOM jako
scrollHeight
. Musimy tylko pobrać element DOM z elementu jQuery przez wywołanieget(0)
i wtedy możemy uzyskać dostęp do właściwości.Dodanie funkcji zwrotnej w celu ustawienia wysokości na auto pozwala na większą responsywność po zakończeniu animacji (kredyt chris-williams ):
źródło
clientHeight
, który wydaje się być nieobsługiwany: developer.mozilla.org/en-US/docs/Web/ API / Element.clientHeight$('#first').animate({ height: $('#first').get(0).scrollHeight }, 1000, function() { $(this).height('auto'); });
scrollWidth
animacjami szerokości.Jest to w zasadzie to samo podejście, co odpowiedź Box9, ale zapakowałem ją w ładną wtyczkę jquery, która przyjmuje te same argumenty, co zwykły animowany , gdy potrzebujesz więcej animowanych parametrów i masz dość powtarzania tego samego kodu w kółko :
edit: teraz można łączyć w łańcuchy i czyścić
źródło
Lepsze rozwiązanie nie polegałoby na JS do ustawiania wysokości elementu. Poniżej przedstawiono rozwiązanie, które animuje element o stałej wysokości do pełnej („automatycznej”) wysokości:
https://gist.github.com/2023150
źródło
height
to stałą wartość (np. 122px). Mój element po chwili zmienił wysokość, więc musiałem zastąpić argument duration (400) opcjami{duration: 400, complete: function() {$selector.css('height', 'auto');}}
to działa i jest prostsze niż wcześniejsze rozwiązania:
CSS:
JS:
Uwaga: to rozwiązanie wymaga interfejsu użytkownika jQuery
źródło
.addClass
i.removeClass
?źródło
Zawsze możesz zawinąć elementy potomne #first i zapisać wysokość otoki jako zmienną. To może nie być najładniejsza lub najbardziej skuteczna odpowiedź, ale to załatwia sprawę.
Oto skrzypce, w których zawarłem reset.
ale do twoich celów, oto mięso i ziemniaki:
źródło
Użyj slideDown i slideUp
źródło
Udało mi się to naprawić: D tutaj kod.
źródło
Możesz sprawić, by odpowiedź Liquinaut reagowała na zmiany rozmiaru okna, dodając wywołanie zwrotne, które ustawia wysokość z powrotem na auto.
źródło
Zasadniczo automatyczna wysokość jest dostępna tylko po wyrenderowaniu elementu. Jeśli ustawisz stałą wysokość lub Twój element nie jest wyświetlany, nie możesz uzyskać do niego dostępu bez żadnych sztuczek.
Na szczęście jest kilka sztuczek, których możesz użyć.
Sklonuj element, wyświetl go poza widokiem, nadaj mu wysokość auto i możesz go pobrać z klonu i użyć później jako głównego elementu. Używam tej funkcji i wydaje się, że działa dobrze.
STOSOWANIE:
źródło
zawsze możesz to zrobić:
tutaj jest skrzypce: http://jsfiddle.net/Zuriel/faE9w/2/
źródło
.appendTo("body")
przez.appendTo(el.parent())
Twoje selektory wydają się nie pasować. Czy Twój element ma identyfikator „first”, czy jest to pierwszy element w każdym elemencie div?
Bezpieczniejszym rozwiązaniem byłoby użycie „this”:
źródło
$(this)
wewnątrz twojego modułu obsługi kliknięć.animate({height: 'auto'})
nie ma żadnego efektu. Przynajmniej nie z jQuery 1.6.4.Spróbuj tego ,
źródło
Oto taki, który działa z BORDER-BOX ...
Cześć chłopaki. Oto wtyczka jQuery, którą napisałem, aby zrobić to samo, ale także uwzględnić różnice wysokości, które wystąpią, gdy
box-sizing
ustawisz naborder-box
.Dołączyłem również wtyczkę „yShrinkOut”, która ukrywa element, zmniejszając go wzdłuż osi y.
Każdy z parametrów, których użyłem, można pominąć lub ustawić na null, aby zaakceptować wartości domyślne. Parametry, których użyłem:
źródło
Przełącz slajd ( odpowiedź Box9 rozwinięta)
źródło
Publikuję tę odpowiedź, mimo że ten wątek jest stary. Nie mogłem uzyskać zaakceptowanej odpowiedzi, która zadziałała dla mnie. Ten działa dobrze i jest dość prosty.
Ładuję wysokość każdego elementu div do danych
Następnie używam tego podczas animacji kliknięciem.
Używam przejścia CSS, więc nie używam animacji jQuery, ale możesz zrobić to samo.
źródło
możesz go przechowywać w atrybucie danych.
źródło
Potrzebowałem tej funkcji dla wielu obszarów do czytania więcej na jednej stronie, implementując ją w krótkim kodzie Wordpressa. Napotkałem ten sam problem.
Zaprojektuj technicznie wszystkie rozpiętości Read more na stronie mają stałą wysokość. Chciałem móc osobno rozszerzyć je do wysokości automatycznej za pomocą przełącznika. Pierwsze kliknięcie: „rozwiń do pełnej wysokości rozpiętości tekstu”, drugie kliknięcie: „zwiń z powrotem do domyślnej wysokości 70 pikseli”
HTML
CSS
Więc powyżej wygląda to bardzo prosto
data-base
atrybut, którego potrzebuję, aby ustawić wymaganą stałą wysokość. Plikdata-height
Atrybut użyłem do przechowywania rzeczywistej (dynamiczny) wysokość elementu.Część jQuery
Najpierw użyłem funkcji clickToggle do pierwszego i drugiego kliknięcia. Ważniejsza jest druga funkcja:
setAttr_height()
wszystkie.read-more
elementy mają swoje rzeczywiste wysokości ustawione podczas ładowania strony wbase-height
atrybucie. Następnie wysokość bazowa jest ustawiana za pomocą funkcji jquery css.Mając oba nasze atrybuty, możemy teraz przełączać się między nimi w płynny sposób. Tylko chang
data-base
do żądanej wysokości (stałe) i przełączyć klasę .read-bardziej dla własnego IDWszyscy możecie zobaczyć, jak działa na skrzypcach FIDDLE
źródło
Jeśli chcesz tylko pokazać i ukryć, powiedz div, ten kod pozwoli ci użyć jQuery animate. Możesz mieć jQuery animować większość wysokości, którą chcesz, lub możesz oszukać animację, animując do 0px. jQuery potrzebuje tylko wysokości ustawionej przez jQuery, aby przekonwertować ją na auto. Więc .animate dodaje style = "" do elementu, który .css (height: auto) konwertuje.
Najczystszym sposobem, w jaki widziałem tę pracę, jest animacja do oczekiwanej wysokości, a następnie ustawienie automatycznego ustawienia i może wyglądać bardzo płynnie, gdy zostanie wykonana prawidłowo. Możesz nawet animować poza tym, czego się spodziewasz, a to się cofnie. Animacja do 0 pikseli w czasie 0 po prostu obniża wysokość elementu do jego automatycznej wysokości. Dla ludzkiego oka i tak wygląda na ożywioną. Cieszyć się..
Przepraszam, wiem, że to stary post, ale czułem, że będzie to istotne dla użytkowników poszukujących tej funkcji nadal z jQuery, którzy natknęli się na ten post.
źródło
Złożyłem coś, co robi dokładnie to, czego szukałem i wygląda świetnie. Użycie scrollHeight elementu pozwala uzyskać wysokość, kiedy został załadowany do DOM.
źródło