Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menghidupkan Elemen Div ke Ketinggian Auto Menggunakan jQuery?

Bagaimana untuk Menghidupkan Elemen Div ke Ketinggian Auto Menggunakan jQuery?

Mary-Kate Olsen
Lepaskan: 2024-12-07 06:25:19
asal
985 orang telah melayarinya

How to Animate a Div Element to Auto Height Using jQuery?

Menghidupkan Elemen ke Ketinggian Auto dengan jQuery

Apabila cuba menghidupkan

elemen daripada ketinggian tertentu kepada ketinggian auto, isu mungkin timbul. Untuk menangani perkara ini, pertimbangkan penyelesaian berikut:

  1. Simpan ketinggian semasa: Tentukan ketinggian
    sebelum mengubah saiz.
var curHeight = $('#first').height();
Salin selepas log masuk
  1. Peralihan kepada ketinggian auto: Tulis ganti sifat ketinggian dengan 'auto' seketika.
$('#first').css('height', 'auto');
Salin selepas log masuk
  1. Dapatkan ketinggian auto: Ambil ketinggian semula jadi
    dengan ketinggian auto.
var autoHeight = $('#first').height();
Salin selepas log masuk
  1. Berbalik dan hidupkan: Pulihkan ketinggian awal dan mulakan animasi ke ketinggian auto.
$('#first').height(curHeight).animate({height: autoHeight}, 1000);
Salin selepas log masuk
  1. Sambungkan kod: Gabungkan semua langkah untuk yang mudah penyelesaian.
var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Elemen Div ke Ketinggian Auto Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan