Ich möchte eine <div>von 200pxbis autoHöhe animieren . Ich kann es aber nicht zum Laufen bringen. Weiß jemand wie?

Hier ist der Code:

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

1. Speichern Sie die aktuelle Höhe:

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

2. Schalten Sie die Höhe vorübergehend auf Auto:

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

3. Holen Sie sich die automatische Höhe:

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

4. Wechseln Sie zurück zu curHeightund animieren Sie zu autoHeight:

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

Und zusammen:

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

IMO ist dies die sauberste und einfachste Lösung:

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

Erläuterung: Das DOM weiß bereits beim ersten Rendern, welche Größe das erweiterte Div haben wird, wenn es auf die automatische Höhe eingestellt ist. Diese Eigenschaft wird im DOM-Knoten als gespeichert scrollHeight. Wir müssen nur das DOM-Element durch Aufrufen aus dem jQuery-Element abrufen get(0)und können dann auf die Eigenschaft zugreifen.

Das Hinzufügen einer Rückruffunktion zum Einstellen der Höhe auf Auto ermöglicht eine höhere Reaktionsfähigkeit, sobald die Animation abgeschlossen ist (Kredit Chris-Williams ):

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

Dies ist im Grunde der gleiche Ansatz wie die Antwort von Box9, aber ich habe ihn in ein nettes JQuery-Plugin eingewickelt , das dieselben Argumente wie ein reguläres Animieren verwendet , wenn Sie mehr animierte Parameter benötigen und es leid sind, denselben Code immer wieder zu wiederholen ::

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

edit: jetzt verkettbar und sauberer

Eine bessere Lösung würde nicht darauf beruhen, dass JS die Höhe Ihres Elements festlegt. Das Folgende ist eine Lösung, die ein Element mit fester Höhe auf volle ("automatische") Höhe animiert:

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

Dies funktioniert und es ist einfacher als Lösungen vor:

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

    })
});

Hinweis: Für diese Lösung ist die jQuery-Benutzeroberfläche erforderlich

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

Sie können die untergeordneten Elemente von #first jederzeit umbrechen und die Höhe des Wrappers als Variable speichern. Dies ist vielleicht nicht die schönste oder effizienteste Antwort, aber es macht den Trick.

Hier ist eine Geige, bei der ich einen Reset eingefügt habe.

Aber für Ihre Zwecke ist hier das Fleisch und die Kartoffeln:

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

Verwenden Sie slideDown und slideUp

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

Ich habe es geschafft, das Problem zu beheben: Hier ist der Code.

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

Sie können die Antwort von Liquinaut auf Änderungen der Fenstergröße reagieren lassen, indem Sie einen Rückruf hinzufügen, der die Höhe auf automatisch zurücksetzt.

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

Grundsätzlich steht Ihnen die Höhenautomatik erst zur Verfügung, nachdem das Element gerendert wurde. Wenn Sie eine feste Höhe festlegen oder wenn Ihr Element nicht angezeigt wird, können Sie ohne Tricks nicht darauf zugreifen.

Zum Glück gibt es einige Tricks, die Sie verwenden können.

Klonen Sie das Element, zeigen Sie es außerhalb der Ansicht an. Geben Sie ihm automatisch die Höhe. Sie können es aus dem Klon nehmen und später für das Hauptelement verwenden. Ich benutze diese Funktion und scheint gut zu funktionieren.

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

VERWENDUNG:

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

Sie können dies immer tun:

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

Hier ist eine Geige: http://jsfiddle.net/Zuriel/faE9w/2/

Ihre Selektoren scheinen nicht übereinzustimmen. Hat Ihr Element die ID 'first' oder ist es das erste Element in jedem Div?

Eine sicherere Lösung wäre, "dies" zu verwenden:

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

Probier diese ,

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

Hier ist eine, die mit BORDER-BOX funktioniert ...

Hallo Leute. Hier ist ein jQuery - Plugin Ich schrieb das gleiche zu tun, sondern auch erklären die Höhenunterschiede , die auftreten, wenn Sie haben box-sizingzu setzen border-box.

Ich habe auch ein "yShrinkOut" -Plugin eingefügt, das das Element verbirgt, indem es entlang der y-Achse verkleinert wird.

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

Jeder der von mir verwendeten Parameter kann weggelassen oder auf null gesetzt werden, um Standardwerte zu akzeptieren. Die Parameter, die ich verwendet habe:

• growTo: Wenn Sie alle Berechnungen überschreiben und die CSS-Höhe festlegen möchten, auf die das Objekt wachsen soll, verwenden Sie diesen Parameter.
• Dauer: Die Dauer der Animation ( offensichtlich ).
• whenComplete: Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.

Folie umschalten (Antwort von Box9 erweitert)

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

Ich poste diese Antwort, obwohl dieser Thread alt ist. Ich konnte die akzeptierte Antwort nicht bekommen, um für mich zu arbeiten. Dieser funktioniert gut und ist ziemlich einfach.

Ich lade die Höhe jedes gewünschten Divs in die Daten

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

Dann benutze ich das einfach beim Animieren per Klick.

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

Ich verwende den CSS-Übergang, daher verwende ich nicht die jQuery-Animation, aber Sie können die Animation trotzdem ausführen.

Sie können es in einem Datenattribut speichern.

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

Ich brauchte diese Funktionalität für mehrere Lesebereiche auf einer Seite, um dies in einen Wordpress-Shortcode zu implementieren, bei dem ich auf dasselbe Problem gestoßen bin.

Technisch gesehen haben alle auf der Seite gelesenen Bereiche eine feste Höhe. Und ich wollte sie mit einem Knebel separat auf eine automatische Höhe erweitern können. Erster Klick: 'Auf volle Höhe der Textspanne erweitern', zweiter Klick: 'Auf Standardhöhe von 70px zurückklappen'

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

Daher sieht das data-baseAttribut, das ich zum Einstellen der erforderlichen festen Höhe benötige, sehr einfach aus . Das data-heightAttribut, mit dem ich die tatsächliche (dynamische) Höhe des Elements gespeichert habe.

Der jQuery-Teil

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

});

Zuerst habe ich eine clickToggle-Funktion für meinen ersten und zweiten Klick verwendet. Die zweite Funktion ist wichtiger: Bei setAttr_height()allen .read-moreElementen werden die tatsächlichen Höhen beim Laden der Seite im base-heightAttribut festgelegt. Danach wird die Basishöhe über die Funktion jquery css eingestellt.

Wenn beide Attribute festgelegt sind, können wir jetzt reibungslos zwischen ihnen wechseln. Nur chang die data-baseauf die gewünschte (fest) Höhe und schalten Sie die .lesen-Klasse mehr für die eigene ID

Sie können alle sehen, wie es in einem Fiddle FIDDLE funktioniert

Keine jQuery-Benutzeroberfläche erforderlich

Wenn Sie nur ein Div ein- und ausblenden möchten, können Sie mit diesem Code jQuery animieren. Sie können jQuery den größten Teil der gewünschten Höhe animieren lassen oder Sie können die Animation animieren, indem Sie sie auf 0px animieren. jQuery benötigt nur eine von jQuery festgelegte Höhe, um sie in auto zu konvertieren. Das .animate fügt dem Element, das .css (height: auto) konvertiert, den style = "" hinzu.

Die sauberste Art und Weise, wie ich diese Arbeit gesehen habe, besteht darin, auf die erwartete Höhe zu animieren und sie dann automatisch einstellen zu lassen. Wenn sie richtig ausgeführt wird, kann sie sehr nahtlos aussehen. Sie können sogar über das hinaus animieren, was Sie erwarten, und es wird zurückschnappen. Beim Animieren auf 0px mit einer Dauer von 0 wird die Elementhöhe einfach auf die automatische Höhe gesenkt. Für das menschliche Auge sieht es trotzdem animiert aus. Genießen..

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

Es tut mir leid, dass ich weiß, dass dies ein alter Beitrag ist, aber ich hatte das Gefühl, dass dies für Benutzer relevant ist, die diese Funktionalität noch bei jQuery suchen und auf diesen Beitrag stoßen.

Ich habe etwas zusammengestellt, das genau das tut, wonach ich gesucht habe und das großartig aussieht. Wenn Sie die scrollHeight eines Elements verwenden, erhalten Sie die Höhe, zu der es in das DOM geladen wurde.

 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>