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

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 );
});

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:

1. Simpan ketinggian semasa: Simpan ketinggian semasa elemen untuk memulihkannya selepas memperoleh auto ketinggian.

   var curHeight = $('#first').height();

2. Tukar ketinggian kepada auto buat sementara waktu: Tetapkan ketinggian elemen kepada "auto" buat sementara waktu untuk mengira ketinggian yang diingini.

   $('#first').css('height', 'auto');

3. Dapatkan ketinggian auto: Dapatkan elemen ketinggian selepas menetapkannya kepada "auto".

   var autoHeight = $('#first').height();

4. 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);

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);

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!

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