Bagaimana untuk Menghidupkan Ketinggian Div kepada 'auto' dengan jQuery?

Menghidupkan Elemen kepada Ketinggian Auto dengan jQuery

Anda mahu menganimasikan div untuk melaraskan ketinggiannya secara automatik berdasarkan kandungannya. Walaupun kod asasnya mudah, ia mungkin tidak berfungsi seperti yang diharapkan. Kami akan menyelidiki penyelesaiannya dan memberikan penjelasan langkah demi langkah di bawah.

Coretan Kod

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

Penyelesaian

Kod yang disediakan cuba menghidupkan ketinggian div kepada 'auto', membolehkan ia berkembang berdasarkan kandungannya. Walau bagaimanapun, ia tidak berfungsi kerana ketinggian awal div ditetapkan kepada 200px. Apabila ketinggian 'auto' dianimasikan daripada 200px, tiada perubahan yang kelihatan.

Langkah

Untuk mencapai kesan yang diingini, kita perlu menyimpan ketinggian semasa dahulu ( 200px) dan tetapkan sementara ketinggian kepada 'auto' untuk mengira ketinggian auto sebenar. Begini cara untuk melakukannya:

1. Simpan Ketinggian Semasa:

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

2. Tetapkan Ketinggian kepada Auto (Sementara):

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

3. Dapatkan Ketinggian Auto:

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

4. Kembali kepada Ketinggian Semasa dan Animasikan:

   $('#first').height(curHeight).animate({height: autoHeight}, 1000);

Kod Gabungan:

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