Bir Canlandırmak istediğiniz <div>den 200pxüzere autoyükseklik. Yine de çalışmasını sağlayamıyorum. Nasıl olduğunu bilen var mı?

İşte kod:

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

1. Geçerli yüksekliği kaydedin:

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

2. Yüksekliği geçici olarak otomatik olarak değiştirin:

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

3. Otomatik yüksekliği alın:

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

4. Geri dönün curHeightve şuna animasyon uygulayın autoHeight:

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

Ve birlikte:

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

IMO bu en temiz ve en kolay çözümdür:

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

Açıklama: DOM, ilk oluşturma işleminden, genişletilmiş div'in otomatik yüksekliğe ayarlandığında ne boyutta olacağını zaten biliyor. Bu özellik DOM düğümünde olarak depolanır scrollHeight. Sadece jQuery Elementinden DOM Elementini arayarak getirmeliyiz get(0)ve sonra özelliğe erişebiliriz.

Yüksekliği otomatik olarak ayarlamak için bir geri arama işlevi eklemek, animasyon tamamlandıktan sonra daha fazla yanıt verebilirlik sağlar (kredi chris-williams ):

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

Bu temelde BOX9 tarafından yanıt olarak aynı yaklaşımdır ama güzel Meydanı bunu sarılmış jquery eklentisi düzenli canlandırılır aynı argümanları alır daha hareketli parametrelere sahip ve tekrar tekrar aynı kodu tekrar yorgun almak gerekir zamanlar için, :

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

düzenleme: zincirlenebilir ve temizleyici şimdi

Daha iyi bir çözüm, öğenizin yüksekliğini ayarlamak için JS'ye güvenmez. Aşağıda, sabit bir yükseklik öğesini tam ("otomatik") yüksekliğe hareketlendiren bir çözüm bulunmaktadır:

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

Bu çalışıyor ve daha önce çözümler daha basit:

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

    })
});

Not: Bu çözüm jQuery UI gerektirir

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

Her zaman #first öğesinin alt öğelerini sarabilir ve sarmalayıcının yükseklik yüksekliğini değişken olarak kaydedebilirsiniz. Bu en güzel ya da en etkili cevap olmayabilir, ancak hile yapar.

İşte bir sıfırlama eklediğim bir keman .

ama sizin amaçlarınız için et ve patatesler:

$(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            
    })
});
});​

Kullanım slideDown ve slideUp

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

Ben düzeltmek başardı: D kodu heres.

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

Yüksekliği otomatik olarak ayarlayan bir geri arama ekleyerek Liquinaut'un yanıtını pencere boyutu değişikliklerine duyarlı hale getirebilirsiniz.

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

Temelde otomatik yükseklik ayarı yalnızca öğe oluşturulduktan sonra kullanılabilir. Sabit bir yükseklik ayarlarsanız veya öğeniz görüntülenmezse, herhangi bir hile olmadan erişemezsiniz.

Neyse ki kullanabileceğiniz bazı hileler var.

Öğeyi klonlayın, görünümün dışında görüntüleyin, yüksekliğe otomatik olarak verin ve klondan alabilir ve daha sonra ana öğe için kullanabilirsiniz. Bu işlevi kullanıyorum ve iyi çalışıyor gibi görünüyor.

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

KULLANIM:

$(".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); 
});

bunu her zaman yapabilirsiniz:

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

işte bir keman: http://jsfiddle.net/Zuriel/faE9w/2/

Seçicileriniz uyuşmuyor. Öğenizin 'ilk' kimliği var mı yoksa her div'deki ilk öğe mi?

Daha güvenli bir çözüm 'this' kullanmak olacaktır:

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

Bunu dene ,

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

İşte BORDER-BOX ile çalışan ...

Merhaba millet. İşte aynı şeyi yapmak için yazdığım bir jQuery eklentisi, aynı zamanda box-sizingayarladığınız zaman oluşacak yükseklik farklılıklarını daborder-box .

Ayrıca, öğeyi y ekseni boyunca daraltarak gizleyen bir "yShrinkOut" eklentisi ekledim.

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

Kullandığım parametrelerden herhangi biri varsayılan değerleri kabul etmek için atlanabilir veya null değerine ayarlanabilir. Kullandığım parametreler:

• growTo: Tüm hesaplamaları geçersiz kılmak ve nesnenin büyüyeceği CSS yüksekliğini ayarlamak istiyorsanız, bu parametreyi kullanın.
• duration: Animasyonun süresi ( belli ki ).
• whenComplete: Animasyon tamamlandığında çalıştırılacak bir işlev.

Slaytı aç / kapat ( Box9'un yanıtı genişletildi)

$("#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>

Bu konu eski olsa bile bu cevabı gönderiyorum. Benim için çalışmak için kabul edilen cevabı alamadım. Bu iyi çalışıyor ve oldukça basit.

İstediğim her divin yüksekliğini verilere yüklüyorum

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

Sonra sadece tıklama üzerinde animasyon yaparken kullanıyorum.

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

CSS geçiş kullanıyorum, bu yüzden jQuery animasyon kullanmıyorum, ama aynı animasyon yapabilirsiniz.

veri özniteliğinde saklayabilirsiniz.

$('.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);
    }
});

Birden fazla okuma alanı için bu işlevselliğe ihtiyacım var bir sayfada bu Wordpress kısa kodunu uygulayarak aynı sorunla karşılaştım.

Tasarım teknik olarak sayfadaki daha fazla okunan tüm sabit bir yüksekliğe sahiptir. Ve bunları ayrı ayrı bir otomatik geçiş yüksekliğine getirerek ayrı ayrı genişletmek istedim. İlk tıklama: 'metin açıklığının tam yüksekliğine genişlet', ikinci tıklama: 'varsayılan 70 piksel yüksekliğe geri dön'

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

Bu yüzden bunun üzerinde data-basegerekli sabit yüksekliği ayarlamak için gereken özellik çok basit görünüyor . data-heightÖzelliği, I elementinin gerçek (dinamik) yüksekliği depolamak için kullanılan.

JQuery bölümü

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

});

İlk olarak, ilk ve ikinci tıklatmam için bir clickToggle işlevi kullandım. İkinci işlev daha önemlidir: setAttr_height()Tüm .read-moreöğelerin, base-heightöznitelikteki sayfa yükünde ayarlanan gerçek yükseklikleri vardır . Bundan sonra taban yüksekliği jquery css işlevi ile ayarlanır.

Her iki öznitelik setimizle artık bunlar arasında düzgün bir şekilde geçiş yapabiliriz. Yalnızca data-baseistediğiniz (sabit) yüksekliğe geçin ve kendi kimliğiniz için .read-more sınıfını değiştirin

Hepiniz bir keman FIDDLE içinde çalıştığını görebilirsiniz

JQuery kullanıcı arayüzü gerekmez

İstediğiniz tek şey bir div söylemek ve gizlemekse, bu kod jQuery animate'i kullanmanıza izin verecektir. JQuery'nin istediğiniz yüksekliğin büyük bölümünü canlandırmasını sağlayabilirsiniz ya da 0 piksele animasyon yaparak animasyonu kandırabilirsiniz. jQuery sadece jQuery tarafından otomatik olarak dönüştürmek için ayarlanan bir yüksekliğe ihtiyaç duyar. Böylece .animate, .css (height: auto) öğesinin dönüştürdüğü öğeye style = "" öğesini ekler.

Bu işi gördüğüm en temiz yol, beklediğiniz yüksekliğe yaklaşmak, sonra otomatik ayarlamasına izin vermek ve doğru yapıldığında çok sorunsuz görünebilir. Hatta ne beklediğinizi canlandırabilirsiniz ve geri çekilecektir. 0 sürede 0 piksele animasyon yapmak, eleman yüksekliğini otomatik yüksekliğine düşürür. İnsan gözüne göre, yine de animasyonlu görünüyor. Zevk almak..

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

Üzgünüz, bu eski bir yazı olduğunu biliyorum, ama bu hala bu yazı rastlamak jQuery ile bu işlevselliği arayan kullanıcılar için alakalı olacağını hissettim.

Tam olarak aradığımı yapan ve harika görünen bir şey bir araya getirdim. Bir öğenin scrollHeight öğesinin kullanılması, DOM öğesine ne zaman yüklendiğini gösterir.

 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>