Saya ingin menghidupkan <div>dari 200pxke autoketinggian. Sepertinya saya tidak bisa membuatnya bekerja. Adakah yang tahu bagaimana caranya?

Berikut kodenya:

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

1. Simpan ketinggian saat ini:

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

2. Pindahkan ketinggian sementara ke otomatis:

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

3. Dapatkan ketinggian otomatis:

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

4. Beralih kembali ke curHeightdan hidupkan ke autoHeight:

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

Dan bersama-sama:

var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);

IMO ini adalah solusi terbersih dan termudah:

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );

Penjelasan: DOM sudah tahu dari rendering awal berapa ukuran div yang diperluas ketika diatur ke tinggi otomatis. Properti ini disimpan di simpul DOM sebagai scrollHeight. Kita hanya perlu mengambil Elemen DOM dari Elemen jQuery dengan menelepon get(0)dan kemudian kita dapat mengakses properti.

Menambahkan fungsi panggilan balik untuk mengatur ketinggian ke otomatis memungkinkan respons yang lebih besar setelah animasi selesai (credit chris-williams ):

$('#first').animate({
    height: $('#first').get(0).scrollHeight
}, 1000, function(){
    $(this).height('auto');
});

Ini pada dasarnya adalah pendekatan yang sama dengan jawaban oleh Box9 tapi saya membungkusnya dalam plugin jquery bagus yang mengambil argumen yang sama dengan animasi biasa , karena ketika Anda perlu memiliki lebih banyak parameter animasi dan bosan mengulangi kode yang sama berulang-ulang :

;(function($)
{
  $.fn.animateToAutoHeight = function(){
  var curHeight = this.css('height'),
      height = this.css('height','auto').height(),
      duration = 200,
      easing = 'swing',
      callback = $.noop,
      parameters = { height: height };
  this.css('height', curHeight);
  for (var i in arguments) {
    switch (typeof arguments[i]) {
      case 'object':
        parameters = arguments[i];
        parameters.height = height;
        break;
      case 'string':
        if (arguments[i] == 'slow' || arguments[i] == 'fast') duration = arguments[i];
        else easing = arguments[i];
        break;
      case 'number': duration = arguments[i]; break;
      case 'function': callback = arguments[i]; break;
    }
  }
  this.animate(parameters, duration, easing, function() {
    $(this).css('height', 'auto');
    callback.call(this, arguments);
  });
  return this;
  }
})(jQuery);

sunting: rantai dan bersih sekarang

Solusi yang lebih baik tidak akan bergantung pada JS untuk mengatur ketinggian elemen Anda. Berikut ini adalah solusi yang menggerakkan elemen ketinggian tetap ke ketinggian penuh ("otomatis"):

var $selector = $('div');
    $selector
        .data('oHeight',$selector.height())
        .css('height','auto')
        .data('nHeight',$selector.height())
        .height($selector.data('oHeight'))
        .animate({height: $selector.data('nHeight')},400);

https://gist.github.com/2023150

ini berfungsi dan ini lebih simpel daripada solusi sebelumnya:

CSS:

#container{
  height:143px;  
}

.max{
  height: auto;
  min-height: 143px;
}

JS:

$(document).ready(function() {
    $("#container").click(function() {      
        if($(this).hasClass("max")) {
            $(this).removeClass("max");
        } else {
            $(this).addClass("max");
        }

    })
});

Catatan: Solusi ini membutuhkan jQuery UI

var h = document.getElementById('First').scrollHeight;
$('#First').animate({ height : h+'px' },300);

Anda selalu dapat membungkus elemen turunan #first dan menyimpan ketinggian tinggi pembungkus sebagai variabel. Ini mungkin bukan jawaban yang paling cantik atau paling efisien, tetapi itu yang berhasil.

Ini biola di mana saya memasukkan reset.

tetapi untuk tujuan Anda, inilah daging & kentang:

$(function(){
//wrap everything inside #first
$('#first').children().wrapAll('<div class="wrapper"></div>');
//get the height of the wrapper 
var expandedHeight = $('.wrapper').height();
//get the height of first (set to 200px however you choose)
var collapsedHeight = $('#first').height();
//when you click the element of your choice (a button in my case) #first will animate to height auto
$('button').click(function(){
    $("#first").animate({
        height: expandedHeight            
    })
});
});​

Gunakan slideDown dan slideUp

$("div:first").click(function(){ $("#first").slideDown(1000); });

Saya berhasil memperbaikinya: D inilah kode.

var divh = document.getElementById('first').offsetHeight;
$("#first").css('height', '100px');
$("div:first").click(function() {
  $("#first").animate({
    height: divh
  }, 1000);
});

Anda dapat membuat jawaban Liquinaut responsif terhadap perubahan ukuran jendela dengan menambahkan panggilan balik yang mengatur ketinggian kembali ke otomatis.

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000, function() {$("#first").css({height: "auto"});});

Pada dasarnya ketinggian otomatis hanya tersedia untuk Anda setelah elemen diberikan. Jika Anda menetapkan ketinggian tetap, atau jika elemen Anda tidak ditampilkan, Anda tidak dapat mengaksesnya tanpa trik.

Untungnya ada beberapa trik yang bisa Anda gunakan.

Kloning elemen, tampilkan di luar tampilan, berikan ketinggian secara otomatis dan Anda dapat mengambilnya dari klon dan menggunakannya nanti untuk elemen utama. Saya menggunakan fungsi ini dan tampaknya berfungsi dengan baik.

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;

    return this.each(function(i, el){
        el = jQuery(el), elem =    el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();

        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });   
}

PEMAKAIAN:

$(".animateHeight").bind("click", function(e){
    $(".test").animateAuto("height", 1000); 
});

$(".animateWidth").bind("click", function(e){
    $(".test").animateAuto("width", 1000);  
});

$(".animateBoth").bind("click", function(e){
    $(".test").animateAuto("both", 1000); 
});

Anda selalu dapat melakukan ini:

jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
    el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
    height = elem.css("height"),
    width = elem.css("width"),
    elem.remove();

    if(prop === "height")
        el.animate({"height":height}, speed, callback);
    else if(prop === "width")
        el.animate({"width":width}, speed, callback);  
    else if(prop === "both")
        el.animate({"width":width,"height":height}, speed, callback);
});  
}

di sini adalah biola: http://jsfiddle.net/Zuriel/faE9w/2/

Penyeleksi Anda sepertinya tidak cocok. Apakah elemen Anda memiliki ID 'pertama', atau apakah itu elemen pertama di setiap div?

Solusi yang lebih aman adalah menggunakan 'ini':

// assuming the div you want to animate has an ID of first
$('#first').click(function() {
  $(this).animate({ height : 'auto' }, 1000);
});

Coba yang ini ,

var height;
$(document).ready(function(){
    $('#first').css('height','auto');
    height = $('#first').height();
    $('#first').css('height','200px');
})

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

Inilah yang berfungsi dengan BORDER-BOX ...

Hai kawan. Berikut ini adalah plugin jQuery yang saya tulis untuk melakukan hal yang sama, tetapi juga memperhitungkan perbedaan tinggi yang akan terjadi ketika Anda telah box-sizingmenyetel ke border-box.

Saya juga menyertakan plugin "yShrinkOut" yang menyembunyikan elemen dengan menyusutkannya di sepanjang sumbu y.

// -------------------------------------------------------------------
// Function to show an object by allowing it to grow to the given height value.
// -------------------------------------------------------------------
$.fn.yGrowIn = function (growTo, duration, whenComplete) {

    var f = whenComplete || function () { }, // default function is empty
        obj = this,
        h = growTo || 'calc', // default is to calculate height
        bbox = (obj.css('box-sizing') == 'border-box'), // check box-sizing
        d = duration || 200; // default duration is 200 ms

    obj.css('height', '0px').removeClass('hidden invisible');
    var padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop), // get the starting padding-top
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom), // get the starting padding-bottom
        padLeft = 0 + parseInt(getComputedStyle(obj[0], null).paddingLeft), // get the starting padding-left
        padRight = 0 + parseInt(getComputedStyle(obj[0], null).paddingRight); // get the starting padding-right
    obj.css('padding-top', '0px').css('padding-bottom', '0px'); // Set the padding to 0;

    // If no height was given, then calculate what the height should be.
    if(h=='calc'){ 
        var p = obj.css('position'); // get the starting object "position" style. 
        obj.css('opacity', '0'); // Set the opacity to 0 so the next actions aren't seen.
        var cssW = obj.css('width') || 'auto'; // get the CSS width if it exists.
        var w = parseInt(getComputedStyle(obj[0], null).width || 0) // calculate the computed inner-width with regard to box-sizing.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderRightWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderLeftWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? (padLeft + padRight) : 0); // remove these values if using border-box.
        obj.css('position', 'fixed'); // remove the object from the flow of the document.
        obj.css('width', w); // make sure the width remains the same. This prevents content from throwing off the height.
        obj.css('height', 'auto'); // set the height to auto for calculation.
        h = parseInt(0); // calculate the auto-height
        h += obj[0].clientHeight // calculate the computed height with regard to box-sizing.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderTopWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderBottomWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? (padTop + padBottom) : 0); // add these values if using border-box.
        obj.css('height', '0px').css('position', p).css('opacity','1'); // reset the height, position, and opacity.
    };

    // animate the box. 
    //  Note: the actual duration of the animation will change depending on the box-sizing.
    //      e.g., the duration will be shorter when using padding and borders in box-sizing because
    //      the animation thread is growing (or shrinking) all three components simultaneously.
    //      This can be avoided by retrieving the calculated "duration per pixel" based on the box-sizing type,
    //      but it really isn't worth the effort.
    obj.animate({ 'height': h, 'padding-top': padTop, 'padding-bottom': padBottom }, d, 'linear', (f)());
};

// -------------------------------------------------------------------
// Function to hide an object by shrinking its height to zero.
// -------------------------------------------------------------------
$.fn.yShrinkOut = function (d,whenComplete) {
    var f = whenComplete || function () { },
        obj = this,
        padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop),
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom),
        begHeight = 0 + parseInt(obj.css('height'));

    obj.animate({ 'height': '0px', 'padding-top': 0, 'padding-bottom': 0 }, d, 'linear', function () {
            obj.addClass('hidden')
                .css('height', 0)
                .css('padding-top', padTop)
                .css('padding-bottom', padBottom);
            (f)();
        });
};

Parameter apa pun yang saya gunakan dapat dihilangkan atau diatur ke nol untuk menerima nilai default. Parameter yang saya gunakan:

• growTo: Jika Anda ingin mengesampingkan semua perhitungan dan mengatur tinggi CSS tempat objek akan tumbuh, gunakan parameter ini.
• durasi: Durasi animasi ( jelas ).
• whenComplete: Suatu fungsi untuk dijalankan ketika animasi selesai.

Toggle slide ( jawaban Box9 diperluas)

$("#click-me").click(function() {
  var el = $('#first'),
  curHeight = el.height(),
  autoHeight = el.css('height', 'auto').height(),
  finHeight = $('#first').data('click') == 1 ? "20px" : autoHeight;
  $('#first').data('click', $(this).data('click') == 1 ? false : true);
  el.height(curHeight).animate({height: finHeight});
});

#first {width: 100%;height: 20px;overflow:hidden;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <div id="click-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
</div>

Saya memposting jawaban ini meskipun utas ini sudah lama. Saya tidak bisa mendapatkan jawaban yang diterima untuk bekerja untuk saya. Yang ini berfungsi dengan baik dan sangat sederhana.

Saya memuat tinggi setiap div yang saya inginkan ke dalam data

$('div').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});

Lalu saya hanya menggunakannya saat menghidupkan klik.

$('div').click(function(){
    $(this).css('height',$(this).data('height'));
});

Saya menggunakan transisi CSS, jadi saya tidak menggunakan jQuery animate, tetapi Anda bisa melakukan animate sama saja.

Anda dapat menyimpannya dalam atribut data.

$('.colapsable').each(function(){
    $(this).attr('data-oheight',$(this).height());
    $(this).height(100);
});

$('.colapsable h2:first-child').click(function(){
    $(this).parent('.colapsable').animate({
            height: $(this).parent('.colapsible').data('oheight')
        },500);
    }
});

Saya membutuhkan fungsionalitas ini untuk banyak membaca lebih banyak area pada satu halaman mengimplementasikan ini ke dalam shortcode Wordpress saya mengalami masalah yang sama.

Desain secara teknis semua bacaan lebih lanjut pada halaman memiliki ketinggian tetap. Dan saya ingin dapat mengembangkannya secara terpisah ke ketinggian otomatis dengan toggle. Klik pertama: 'perluas rentang teks penuh', klik kedua: 'runtuh kembali ke ketinggian default 70px'

Html

 <span class="read-more" data-base="70" data-height="null">
     /* Lots of text determining the height of this span */
 </span>
 <button data-target='read-more'>Read more</button>

CSS

span.read-more {
    position:relative;
    display:block;
    overflow:hidden;
}

Jadi di atas ini terlihat sangat sederhana data-baseatribut yang saya butuhkan untuk mengatur ketinggian tetap yang dibutuhkan. The data-heightatribut Aku digunakan untuk menyimpan aktual (dinamis) tinggi dari elemen.

Bagian jQuery

jQuery(document).ready(function($){

  $.fn.clickToggle = function(func1, func2) {
      var funcs = [func1, func2];
      this.data('toggleclicked', 0);
      this.click(function() {
          var data = $(this).data();
          var tc = data.toggleclicked;
          $.proxy(funcs[tc], this)();
          data.toggleclicked = (tc + 1) % 2;
      });
      return this;
  };

    function setAttr_height(key) {
        $(key).each(function(){
            var setNormalHeight = $(this).height();
            $(this).attr('data-height', setNormalHeight);
            $(this).css('height', $(this).attr('data-base') + 'px' );
        });
    }
    setAttr_height('.read-more');

    $('[data-target]').clickToggle(function(){
        $(this).prev().animate({height: $(this).prev().attr('data-height')}, 200);
    }, function(){
        $(this).prev().animate({height: $(this).prev().attr('data-base')}, 200);
    });

});

Pertama saya telah menggunakan fungsi clickToggle untuk klik pertama dan kedua saya. Fungsi kedua lebih penting: setAttr_height()Semua .read-moreelemen memiliki ketinggian aktual yang ditetapkan pada pemuatan halaman dalam base-heightatribut. Setelah itu ketinggian dasar diatur melalui fungsi jquery css.

Dengan kedua set atribut kami, kami sekarang dapat beralih di antara mereka dengan cara yang mulus. Hanya ubah data-baseke ketinggian (tetap) yang Anda inginkan dan alihkan kelas .read-more untuk ID Anda sendiri

Anda semua bisa melihatnya bekerja di FIDDLE biola

Tidak diperlukan jQuery UI

Jika yang Anda inginkan adalah menampilkan dan menyembunyikan say a div, maka kode ini akan memungkinkan Anda menggunakan jQuery untuk menghidupkan. Anda dapat membuat jQuery menghidupkan sebagian besar ketinggian yang Anda inginkan atau Anda bisa mengelabui animasi dengan menjiwai ke 0px. jQuery hanya membutuhkan ketinggian yang ditetapkan oleh jQuery untuk mengubahnya menjadi otomatis. Jadi .animate menambahkan style = "" ke elemen yang dikonversi .css (height: auto).

Cara terbersih saya telah melihat pekerjaan ini adalah untuk menghidupkan sekitar ketinggian yang Anda harapkan, kemudian biarkan mengatur otomatis dan dapat terlihat sangat mulus ketika dilakukan dengan benar. Anda bahkan dapat menghidupkan masa lalu apa yang Anda harapkan dan itu akan kembali. Animasi ke 0px pada durasi 0 hanya cukup menjatuhkan ketinggian elemen ke ketinggian otomatisnya. Bagi mata manusia, itu tetap terlihat animasi. Nikmati..

    jQuery("div").animate({
         height: "0px"/*or height of your choice*/
    }, {
         duration: 0,/*or speed of your choice*/
         queue: false, 
         specialEasing: {
             height: "easeInCirc"
        },
         complete: function() {
             jQuery(this).css({height:"auto"});
        }
    });

Maaf saya tahu ini adalah posting lama, tetapi saya merasa ini akan relevan bagi pengguna yang mencari fungsi ini masih dengan jQuery yang menemukan posting ini.

Saya mengumpulkan sesuatu yang melakukan persis apa yang saya cari dan tampak hebat. Menggunakan scrollHeight suatu elemen membuat Anda ketinggian ketika itu dimuat di DOM.

 var clickers = document.querySelectorAll('.clicker');
    clickers.forEach(clicker => {
        clicker.addEventListener('click', function (e) {
            var node = e.target.parentNode.childNodes[5];
            if (node.style.height == "0px" || node.style.height == "") {
                $(node).animate({ height: node.scrollHeight });
            }
            else {
                $(node).animate({ height: 0 });
            }
        });
    });

.answer{
        font-size:15px;
        color:blue;
        height:0px;
        overflow:hidden;
       
    }

 <div class="row" style="padding-top:20px;">
                <div class="row" style="border-color:black;border-style:solid;border-radius:4px;border-width:4px;">
                    <h1>This is an animation tester?</h1>
                    <span class="clicker">click me</span>
                    <p class="answer">
                        I will be using this to display FAQ's on a website and figure you would like this.  The javascript will allow this to work on all of the FAQ divs made by my razor code.  the Scrollheight is the height of the answer element on the DOM load.  Happy Coding :)
                         Lorem ipsum dolor sit amet, mea an quis vidit autem. No mea vide inani efficiantur, mollis admodum accusata id has, eam dolore nemore eu. Mutat partiendo ea usu, pri duis vulputate eu. Vis mazim noluisse oportere id. Cum porro labore in, est accumsan euripidis scripserit ei. Albucius scaevola elaboraret usu eu. Ad sed vivendo persecuti, harum movet instructior eam ei.
                    </p>
                </div>
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>