Voglio animare un <div>da 200pxad autoaltezza. Non riesco però a farlo funzionare. Qualcuno sa come?

Ecco il codice:

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

1. Salva l'altezza attuale:

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

2. Passa temporaneamente l'altezza su auto:

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

3. Ottieni l'altezza automatica:

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

4. Tornare a curHeighte animare a autoHeight:

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

E insieme:

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

IMO questa è la soluzione più semplice e pulita:

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

Spiegazione: Il DOM sa già dal suo rendering iniziale quale dimensione avrà il div espanso quando impostato su altezza automatica. Questa proprietà è memorizzata nel nodo DOM come scrollHeight. Non ci resta che recuperare l'elemento DOM dall'elemento jQuery chiamando get(0)e quindi possiamo accedere alla proprietà.

L'aggiunta di una funzione di callback per impostare l'altezza su auto consente una maggiore reattività una volta completata l'animazione (credit chris-williams ):

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

Questo è fondamentalmente lo stesso approccio della risposta di Box9 ma l'ho racchiuso in un bel plugin jquery che accetta gli stessi argomenti di un normale animato , perché quando hai bisogno di avere più parametri animati e stancarti di ripetere lo stesso codice più volte :

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

modifica: concatenabile e più pulito ora

Una soluzione migliore non farebbe affidamento su JS per impostare l'altezza del tuo elemento. Di seguito è una soluzione che anima un elemento ad altezza fissa all'altezza completa ("auto"):

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

questo funziona ed è più semplice delle soluzioni precedenti:

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

    })
});

Nota: questa soluzione richiede l'interfaccia utente di jQuery

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

Puoi sempre avvolgere gli elementi figlio di #first e salvare l'altezza del wrapper come variabile. Questa potrebbe non essere la risposta più bella o più efficiente, ma fa il trucco.

Ecco un violino in cui ho incluso un reset.

ma per i tuoi scopi, ecco la carne e le patate:

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

Usa slideDown e slideUp

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

Sono riuscito a risolverlo: D ecco il codice.

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

È possibile rendere la risposta di Liquinaut rispondente alle modifiche alle dimensioni della finestra aggiungendo un callback che riporta l'altezza su automatica.

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

Fondamentalmente l'altezza auto è disponibile solo dopo il rendering dell'elemento. Se si imposta un'altezza fissa o se l'elemento non viene visualizzato, non è possibile accedervi senza alcun trucco.

Fortunatamente ci sono alcuni trucchi che puoi usare.

Clonare l'elemento, visualizzarlo al di fuori della vista, assegnargli l'altezza automaticamente e puoi prenderlo dal clone e utilizzarlo in seguito per l'elemento principale. Uso questa funzione e sembra funzionare bene.

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

USO:

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

puoi sempre farlo:

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

ecco un violino: http://jsfiddle.net/Zuriel/faE9w/2/

I tuoi selettori non sembrano corrispondere. Il tuo elemento ha un ID di "primo" o è il primo elemento di ogni div?

Una soluzione più sicura sarebbe usare 'questo':

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

Prova questo ,

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

Eccone uno che funziona con BORDER-BOX ...

Ciao ragazzi. Ecco un plugin jQuery che ho scritto per fare lo stesso, ma anche per tenere conto delle differenze di altezza che si verificheranno quando hai box-sizingimpostato border-box.

Ho anche incluso un plugin "yShrinkOut" che nasconde l'elemento restringendolo lungo l'asse 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)();
        });
};

Qualsiasi parametro che ho usato può essere omesso o impostato su null per accettare i valori predefiniti. I parametri che ho usato:

• growTo: se si desidera sovrascrivere tutti i calcoli e impostare l'altezza CSS su cui crescerà l'oggetto, utilizzare questo parametro.
• durata: la durata dell'animazione ( ovviamente ).
• whenComplete: una funzione da eseguire quando l'animazione è completa.

Attiva / disattiva diapositiva ( risposta di Box9 espansa)

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

Sto postando questa risposta anche se questa discussione è vecchia. Non sono riuscito a far funzionare la risposta accettata per me. Questo funziona bene ed è piuttosto semplice.

Carico l'altezza di ogni div che voglio nei dati

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

Quindi lo uso solo quando si anima al clic.

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

Sto usando la transizione CSS, quindi non uso l'animazione jQuery, ma potresti fare l'animazione allo stesso modo.

puoi memorizzarlo in un attributo di dati.

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

Avevo bisogno di questa funzionalità per più aree di lettura in più su una pagina implementando questo in uno shortcode Wordpress che ho riscontrato lo stesso problema.

Progetta tecnicamente tutte le più span sulla pagina hanno un'altezza fissa. E volevo essere in grado di espanderli separatamente ad un'altezza automatica con un interruttore. Primo clic: "espandi all'altezza massima dell'intervallo di testo", secondo clic: "riduci all'altezza predefinita di 70 px"

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

Quindi sopra sembra molto semplice l' data-baseattributo di cui ho bisogno per impostare l'altezza fissa necessaria. L' data-heightattributo che ho usato per memorizzare l'altezza effettiva (dinamica) dell'elemento.

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

});

Per prima cosa ho usato una funzione clickToggle per il mio primo e secondo clic. La seconda funzione è più importante: setAttr_height()tutti gli .read-moreelementi hanno le loro altezze effettive impostate sul caricamento della pagina base-heightnell'attributo. Successivamente, l'altezza della base viene impostata tramite la funzione CSS jquery.

Con entrambi i nostri attributi impostati ora possiamo alternare tra loro in modo regolare. Cambia solo l' data-basealtezza desiderata (fissa) e cambia la classe .read-more per il tuo ID

Potete vederlo funzionare in un FIDDLE a violino

Nessuna interfaccia utente jQuery necessaria

Se tutto ciò che desideri è mostrare e nascondere, dì un div, allora questo codice ti permetterà di usare jQuery animate. Puoi fare in modo che jQuery animi la maggior parte dell'altezza desiderata o puoi ingannare l'animazione animando a 0px. jQuery ha solo bisogno di un'altezza impostata da jQuery per convertirlo in auto. Quindi .animate aggiunge lo stile = "" all'elemento che .css (height: auto) converte.

Il modo più pulito in cui ho visto questo lavoro è quello di animare fino all'altezza che ti aspetti, quindi lasciare che sia impostato automaticamente e può sembrare molto fluido se fatto bene. Puoi anche animare oltre ciò che ti aspetti e tornerà indietro. L'animazione a 0px alla durata di 0 semplicemente riduce l'altezza dell'elemento alla sua altezza automatica. All'occhio umano, sembra comunque animato. Godere..

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

Mi dispiace, so che si tratta di un vecchio post, ma ho ritenuto che questo sarebbe rilevante per gli utenti che cercano questa funzionalità ancora con jQuery che si imbattono in questo post.

Ho messo insieme qualcosa che fa esattamente quello che stavo cercando e ha un bell'aspetto. L'uso di scrollHeight di un elemento ti dà l'altezza di quando è stato caricato nel 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>