Chcę ożywić <div>od 200pxdo autowysokości. Jednak nie wydaje mi się, żeby to działało. Czy ktoś wie jak?

Oto kod:

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

1. Zapisz aktualną wysokość:

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

2. Tymczasowo przełącz wysokość na automatyczną:

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

3. Uzyskaj automatyczną wysokość:

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

4. Przełącz się z powrotem curHeighti animuj do autoHeight:

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

I razem:

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

IMO to najczystsze i najłatwiejsze rozwiązanie:

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

Wyjaśnienie: DOM już wie z początkowego renderowania, jaki rozmiar będzie miał rozwinięty element div po ustawieniu automatycznej wysokości. Ta właściwość jest przechowywana w węźle DOM jako scrollHeight. Musimy tylko pobrać element DOM z elementu jQuery przez wywołanie get(0)i wtedy możemy uzyskać dostęp do właściwości.

Dodanie funkcji zwrotnej w celu ustawienia wysokości na auto pozwala na większą responsywność po zakończeniu animacji (kredyt chris-williams ):

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

Jest to w zasadzie to samo podejście, co odpowiedź Box9, ale zapakowałem ją w ładną wtyczkę jquery, która przyjmuje te same argumenty, co zwykły animowany , gdy potrzebujesz więcej animowanych parametrów i masz dość powtarzania tego samego kodu w kółko :

;(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: teraz można łączyć w łańcuchy i czyścić

Lepsze rozwiązanie nie polegałoby na JS do ustawiania wysokości elementu. Poniżej przedstawiono rozwiązanie, które animuje element o stałej wysokości do pełnej („automatycznej”) wysokości:

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

to działa i jest prostsze niż wcześniejsze rozwiązania:

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

    })
});

Uwaga: to rozwiązanie wymaga interfejsu użytkownika jQuery

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

Zawsze możesz zawinąć elementy potomne #first i zapisać wysokość otoki jako zmienną. To może nie być najładniejsza lub najbardziej skuteczna odpowiedź, ale to załatwia sprawę.

Oto skrzypce, w których zawarłem reset.

ale do twoich celów, oto mięso i ziemniaki:

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

Użyj slideDown i slideUp

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

Udało mi się to naprawić: D tutaj kod.

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

Możesz sprawić, by odpowiedź Liquinaut reagowała na zmiany rozmiaru okna, dodając wywołanie zwrotne, które ustawia wysokość z powrotem na auto.

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

Zasadniczo automatyczna wysokość jest dostępna tylko po wyrenderowaniu elementu. Jeśli ustawisz stałą wysokość lub Twój element nie jest wyświetlany, nie możesz uzyskać do niego dostępu bez żadnych sztuczek.

Na szczęście jest kilka sztuczek, których możesz użyć.

Sklonuj element, wyświetl go poza widokiem, nadaj mu wysokość auto i możesz go pobrać z klonu i użyć później jako głównego elementu. Używam tej funkcji i wydaje się, że działa dobrze.

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

STOSOWANIE:

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

zawsze możesz to zrobić:

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

tutaj jest skrzypce: http://jsfiddle.net/Zuriel/faE9w/2/

Twoje selektory wydają się nie pasować. Czy Twój element ma identyfikator „first”, czy jest to pierwszy element w każdym elemencie div?

Bezpieczniejszym rozwiązaniem byłoby użycie „this”:

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

Spróbuj tego ,

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

Oto taki, który działa z BORDER-BOX ...

Cześć chłopaki. Oto wtyczka jQuery, którą napisałem, aby zrobić to samo, ale także uwzględnić różnice wysokości, które wystąpią, gdy box-sizingustawisz naborder-box .

Dołączyłem również wtyczkę „yShrinkOut”, która ukrywa element, zmniejszając go wzdłuż osi 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)();
        });
};

Każdy z parametrów, których użyłem, można pominąć lub ustawić na null, aby zaakceptować wartości domyślne. Parametry, których użyłem:

• dorosnąć do: Jeśli chcesz nadpisać wszystkie obliczenia i ustawić wysokość CSS, do której obiekt wzrośnie, użyj tego parametru.
• duration: czas trwania animacji ( oczywiście ).
• whenComplete: funkcja uruchamiana po zakończeniu animacji.

Przełącz slajd ( odpowiedź Box9 rozwinięta)

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

Publikuję tę odpowiedź, mimo że ten wątek jest stary. Nie mogłem uzyskać zaakceptowanej odpowiedzi, która zadziałała dla mnie. Ten działa dobrze i jest dość prosty.

Ładuję wysokość każdego elementu div do danych

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

Następnie używam tego podczas animacji kliknięciem.

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

Używam przejścia CSS, więc nie używam animacji jQuery, ale możesz zrobić to samo.

możesz go przechowywać w atrybucie danych.

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

Potrzebowałem tej funkcji dla wielu obszarów do czytania więcej na jednej stronie, implementując ją w krótkim kodzie Wordpressa. Napotkałem ten sam problem.

Zaprojektuj technicznie wszystkie rozpiętości Read more na stronie mają stałą wysokość. Chciałem móc osobno rozszerzyć je do wysokości automatycznej za pomocą przełącznika. Pierwsze kliknięcie: „rozwiń do pełnej wysokości rozpiętości tekstu”, drugie kliknięcie: „zwiń z powrotem do domyślnej wysokości 70 pikseli”

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

Więc powyżej wygląda to bardzo prosto data-baseatrybut, którego potrzebuję, aby ustawić wymaganą stałą wysokość. Plikdata-heightAtrybut użyłem do przechowywania rzeczywistej (dynamiczny) wysokość elementu.

Część 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);
    });

});

Najpierw użyłem funkcji clickToggle do pierwszego i drugiego kliknięcia. Ważniejsza jest druga funkcja: setAttr_height()wszystkie .read-moreelementy mają swoje rzeczywiste wysokości ustawione podczas ładowania strony w base-heightatrybucie. Następnie wysokość bazowa jest ustawiana za pomocą funkcji jquery css.

Mając oba nasze atrybuty, możemy teraz przełączać się między nimi w płynny sposób. Tylko chang data-basedo żądanej wysokości (stałe) i przełączyć klasę .read-bardziej dla własnego ID

Wszyscy możecie zobaczyć, jak działa na skrzypcach FIDDLE

Nie jest potrzebny interfejs użytkownika jQuery

Jeśli chcesz tylko pokazać i ukryć, powiedz div, ten kod pozwoli ci użyć jQuery animate. Możesz mieć jQuery animować większość wysokości, którą chcesz, lub możesz oszukać animację, animując do 0px. jQuery potrzebuje tylko wysokości ustawionej przez jQuery, aby przekonwertować ją na auto. Więc .animate dodaje style = "" do elementu, który .css (height: auto) konwertuje.

Najczystszym sposobem, w jaki widziałem tę pracę, jest animacja do oczekiwanej wysokości, a następnie ustawienie automatycznego ustawienia i może wyglądać bardzo płynnie, gdy zostanie wykonana prawidłowo. Możesz nawet animować poza tym, czego się spodziewasz, a to się cofnie. Animacja do 0 pikseli w czasie 0 po prostu obniża wysokość elementu do jego automatycznej wysokości. Dla ludzkiego oka i tak wygląda na ożywioną. Cieszyć się..

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

Przepraszam, wiem, że to stary post, ale czułem, że będzie to istotne dla użytkowników poszukujących tej funkcji nadal z jQuery, którzy natknęli się na ten post.

Złożyłem coś, co robi dokładnie to, czego szukałem i wygląda świetnie. Użycie scrollHeight elementu pozwala uzyskać wysokość, kiedy został załadowany do 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>