Bagaimana untuk Menghidupkan Ketinggian Elemen menjadi 'auto' dengan jQuery?-tutorial css-php.cn

Bagaimana untuk Menghidupkan Ketinggian Elemen menjadi 'auto' dengan jQuery?

Mary-Kate Olsen

Lepaskan： 2024-12-06 02:36:09

asal

998 orang telah melayarinya

How to Animate an Element's Height to

Menghidupkan Elemen ke Ketinggian Auto dengan jQuery

Apabila bekerja dengan reka letak responsif, mungkin perlu menganimasikan ketinggian elemen untuk melaraskannya secara automatik saiz berdasarkan kandungan. Walau bagaimanapun, menganimasikan secara langsung sifat ketinggian kepada "auto" mungkin tidak menghasilkan kesan yang diingini.

Berikut ialah contoh kod yang cuba menghidupkan

daripada 200px kepada ketinggian auto:

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

Salin selepas log masuk

Malangnya, kod ini tidak akan menghidupkan ketinggian elemen kepada auto. Sebaliknya, ia hanya akan meruntuhkan elemen kepada ketinggian 0.

Untuk mencapai gelagat yang diingini, ikut langkah berikut:

Simpan ketinggian semasa: Simpan ketinggian semasa elemen untuk memulihkannya selepas memperoleh auto ketinggian.
```
var curHeight = $('#first').height();
```
Salin selepas log masuk
Tukar ketinggian kepada auto buat sementara waktu: Tetapkan ketinggian elemen kepada "auto" buat sementara waktu untuk mengira ketinggian yang diingini.
```
$('#first').css('height', 'auto');
```
Salin selepas log masuk
Dapatkan ketinggian auto: Dapatkan elemen ketinggian selepas menetapkannya kepada "auto".
```
var autoHeight = $('#first').height();
```
Salin selepas log masuk
Tukar kembali dan hidupkan kepada ketinggian auto: Pulihkan ketinggian elemen kepada nilai asalnya, kemudian hidupkan ia ke ketinggian auto.
```
$('#first').height(curHeight).animate({height: autoHeight}, 1000);
```
Salin selepas log masuk

Menggabungkan langkah-langkah ini, kami sampai pada kod berikut yang berjaya menghidupkan elemen kepada ketinggian automatik:

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 Ketinggian Elemen menjadi 'auto' dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!