小开

你的选择器似乎不匹配。元素的 ID 是“ first”，还是每个 div 中的第一个元素？

一个更安全的解决方案是使用“这个”:

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

小开

保存当前高度:
```
var curHeight = $('#first').height();
```
Temporarily switch the height to auto:
```
$('#first').css('height', 'auto');
```
Get the auto height:
```
var autoHeight = $('#first').height();
```

Switch back to curHeight and animate to autoHeight:

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

And together:

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

小开

试试这个,

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

小开

我设法修复它: D 这里的代码。

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

小开

更好的解决方案不会依赖于 JS 来设置元素的高度。下面是一个将固定高度元素动画化为满(“ 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

小开

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

小开

使用滑下来和滑动

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

小开

这是有效的，它比以前的解决方案更简单:

CSS:

#container{
height:143px;
}


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

约翰逊:

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


})
});

注意: 这个解决方案需要 jQuery UI

小开

您总是可以包装 # first 的子元素，并将包装器的高度高度保存为变量。这可能不是最漂亮或最有效的答案，但它确实有效。

这是一个小提琴，我包括一个重置。

但是为了你的目的，这是肉和土豆:

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

小开

这和 Box9给出的答案基本上是一样的，但是我把它包装在了一个漂亮的 Jquery 插件和 采用与常规动画相同的参数中，当你需要更多的动画参数并且厌倦了一遍又一遍重复相同的代码时可以使用它:

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

编辑: 链接和清洁现在

小开

即使这个帖子已经过时了，我还是要发布这个答案。我不能得到公认的答案为我工作。这个很好用，而且很简单。

我将想要的每个 div 的高度加载到数据中

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

然后我只是使用，当点击动画。

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

我使用的是 CSS 转换，所以我不使用 jQuery 动画，但是你也可以使用动画。

小开

你可以这样做:

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

这里有一个小提琴: Http://jsfiddle.net/zuriel/fae9w/2/

小开

国际海事组织认为，这是最干净和最容易的解决办法:

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

说明: DOM 已经从它的初始渲染中知道扩展后的 div 在设置为自动高度时的大小。此属性以 scrollHeight的形式存储在 DOM 节点中。我们只需要通过调用 get(0)从 jQuery Element 获取 DOM Element，然后就可以访问该属性。

添加一个回调函数来设置高度自动允许更大的响应一旦动画完成(信用 Chris-Williams) :

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

小开

您可以将它存储在一个 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);
}
});

小开

这个可以用边境盒子。

大家好。下面是我写的一个 jQuery 插件，它也可以解释当 box-sizing设置为 border-box时会出现的高度差异。

我还包含了一个“ yShrinkOut”插件，它通过沿 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)();
});
};

为了接受默认值，我使用的任何参数都可以省略或设置为 null。我使用的参数是:

如果想覆盖所有计算并设置对象将增长到的 CSS 高度，请使用此参数。

持续时间: 动画的持续时间(很明显)。

完成时: 动画完成时运行的函数。

小开

您可以通过添加一个回调将高度设置回 auto，从而使 Licinaut 的答案响应窗口大小的变化。

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

小开

基本上，height auto 只有在呈现元素之后才可用。如果您设置了一个固定的高度，或者如果您的元素没有显示，那么您就无法在没有任何技巧的情况下访问它。

幸运的是，你可以使用一些技巧。

克隆元素，在视图之外显示它，赋予它自动高度，您可以从克隆中获取它，并在以后将其用于主元素。我使用这个函数，似乎工作得很好。

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

用法:

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

小开

我需要这个功能，多读多区域的一个页面实现这到一个 Wordpress 短代码我遇到了同样的问题。

设计技术上所有的阅读跨度在页面上都有一个固定的高度。我希望能够将它们分别展开为一个带有切换的自动高度。首先单击“展开到文本跨度的全高”，然后单击“折叠回默认高度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; }

所以上面这个看起来非常简单的 data-base属性，我需要设置所需的固定高度。我用来存储元素的实际(动态)高度的 data-height属性。

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

首先，我在第一次和第二次单击中使用了 clickToggle 函数。第二个函数更重要: setAttr_height()在 base-height属性中，所有 .read-more元素在页面加载时都设置了它们的实际高度。然后通过 jquery css 函数设置基准高度。

设置了这两个属性之后，我们现在可以平稳地在它们之间切换。只将 data-base更改为您想要的(固定)高度，然后切换。Read-more 类用于您自己的 ID

你可以看到它在一个小提琴小提琴工作

不需要 jQuery UI

小开

切换幻灯片(第九盒的答案展开)

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

小开

我做了一些完全符合我要求的东西，看起来很棒。使用元素的 scrollHeight 可以得到它在 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>

小开

如果您只想显示和隐藏一个 div，那么这段代码将允许您使用 jQuery animate。你可以让 jQuery 动画你想要的高度的大部分或者你可以欺骗动画通过动画到0px。JQuery 只需要 jQuery 设置的高度就可以将其转换为 auto。所以。Animate 将 style = “”添加到。Css (高度: auto)转换。

我见过的最干净的方式，这项工作是动画左右的高度你期望，然后让它设置自动，它可以看起来非常无缝时，做正确的。你甚至可以动画超过你的预期，它会突然回来。在0的持续时间内动画为0px 只是简单地将元素的高度降低为自动的高度。在人眼里，它看起来是活的。好好享受吧。.

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

对不起，我知道这是一个老文章，但我觉得这将是相关的用户寻求这个功能仍然与 jQuery 谁来到这篇文章。

使用 jQuery 动画元素来自动调整高度

这个可以用边境盒子。