Javascript 使用 jQuery 将元素动画化为自动高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5003220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate element to auto height with jQuery
提问by Daniel
I want to animate a <div>from 200pxto autoheight. I can't seem to make it work though. Does anyone know how?
我想<div>从200px到auto高度动画。我似乎无法让它工作。有谁知道怎么做？
Here's the code:
这是代码：
$("div:first").click(function(){
$("#first").animate({
height: "auto"
}, 1000 );
});
回答by David Tang
Save the current height:
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
curHeightand animate toautoHeight:$('#first').height(curHeight).animate({height: autoHeight}, 1000);
保存当前高度：
var curHeight = $('#first').height();暂时将高度切换为自动：
$('#first').css('height', 'auto');获取自动高度：
var autoHeight = $('#first').height();切换回
curHeight并制作动画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);
回答by Liquinaut
IMO this is the cleanest and easiest solution:
IMO 这是最干净和最简单的解决方案：
$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );
Explanation: The DOM already knows from its initial rendering what size the expanded div will have when set to auto height. This property is stored in the DOM node as scrollHeight. We just have to fetch the DOM Element from the jQuery Element by calling get(0)and then we can access the property.
说明：DOM 已经从其初始渲染中知道设置为自动高度时展开的 div 的大小。此属性存储在 DOM 节点中作为scrollHeight. 我们只需要通过调用从 jQuery 元素中获取 DOM 元素get(0)，然后我们就可以访问该属性。
Adding a callback function to set the height to auto allows for greater responsiveness once the animation is complete (credit chris-williams):
添加回调函数以将高度设置为 auto 可以在动画完成后提高响应速度（信用chris-williams）：
$('#first').animate({
height: $('#first').get(0).scrollHeight
}, 1000, function(){
$(this).height('auto');
});
回答by w0ps
This is basically the same approach as the answer by Box9 but I wrapped it in a nice jquery pluginthat takes the same arguments as a regular animate, for when you need to have more animated parameters and get tired of repeating the same code over and over:
这基本上与 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);
edit:chainable and cleaner now
编辑：现在可链接和清洁
回答by Tim Hettler
A better solution would not rely on JS to set the height of your element. The following is a solution that animates a fixed height element to full ("auto") height:
更好的解决方案是不依赖 JS 来设置元素的高度。以下是将固定高度元素动画化为完整（“自动”）高度的解决方案：
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);
回答by czLukasss
this is working and it is simplier then solutions before:
这是有效的，它比之前的解决方案更简单：
CSS:
CSS：
#container{
height:143px;
}
.max{
height: auto;
min-height: 143px;
}
JS:
JS：
$(document).ready(function() {
$("#container").click(function() {
if($(this).hasClass("max")) {
$(this).removeClass("max");
} else {
$(this).addClass("max");
}
})
});
Note: This solution requires jQuery UI
注意：此解决方案需要 jQuery UI
回答by Ignacio Martínez
var h = document.getElementById('First').scrollHeight;
$('#First').animate({ height : h+'px' },300);
回答by Usha
You can always wrap the child elements of #first and save height height of the wrapper as a variable. This might not be the prettiest or most efficient answer, but it does the trick.
您始终可以包装 #first 的子元素并将包装器的高度高度保存为变量。这可能不是最漂亮或最有效的答案，但它确实有效。
Here's a fiddlewhere I included a reset.
这是我包含重置的小提琴。
but for your purposes, here's the meat & potatoes:
但为了您的目的，这是肉和土豆：
$(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
})
});
});?
回答by Ronny Sherer
回答by Daniel
I managed to fix it :D heres the code.
我设法修复它：D 继承人的代码。
var divh = document.getElementById('first').offsetHeight;
$("#first").css('height', '100px');
$("div:first").click(function() {
$("#first").animate({
height: divh
}, 1000);
});
回答by Cyl
You can make Liquinaut's answer responsive to window size changes by adding a callback that sets the height back to auto.
您可以通过添加将高度设置回自动的回调来使 Liquinaut 的答案响应窗口大小的变化。
$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000, function() {$("#first").css({height: "auto"});});
