JavaScript jQueryanimation到自动高度

我想animation从200px到自动高度的div。 我似乎不能使它工作 – 任何人都知道如何？

代码如下：

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

Answer 1

1. 保存当前的高度：

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

2. 暂时将高度切换为自动：

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

3. 获取汽车高度：

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

4. 切换回curHeight并使用autoHeightanimation：

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

和在一起：

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

Answer 2

海事组织这是最干净和最简单的解决scheme：

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

说明：DOM已经从初始渲染中知道当设置为自动高度时展开的div将具有多大的尺寸。 该属性以scrollHeightforms存储在DOM节点中。 我们只需通过调用get(0)从jQuery Element中获取DOM元素，然后我们就可以访问该属性。

添加callback函数以将高度设置为自动可以在animation完成后实现更高的响应速度（信用度chris-williams ）：

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

Answer 3

这和Box9的回答基本上是一样的，但是我把它包装在一个不错的jquery插件中 ， 它和普通的animation一样采用相同的参数 ，因为当你需要更多的animation参数，并厌倦了重复相同的代码：

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

编辑：现在可链式和清洁

Answer 4

更好的解决scheme不会依赖JS来设置元素的高度。 以下是将固定高度元素animation为完整（“自动”）高度的解决scheme：

 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

Answer 5

这是工作，它是简单的解决scheme之前：

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

注意：这个解决scheme需要jQuery UI

Answer 6

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

Answer 7

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

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

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

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

Answer 8

使用slideDown和slideUp

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

Answer 9

我设法解决它：Dinheritance了代码。

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

Answer 10

基本上，高度自动只适用于你的元素呈现后。 如果你设置了一个固定的高度，或者如果你的元素没有显示，你不能没有任何技巧地访问它。

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

克隆该元素，将其显示在视图之外，并将其设置为高度自动，然后将其从克隆中取出并稍后用于主元素。 我使用这个function，似乎运作良好。

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

Answer 11

你总是可以这样做：

 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/

Answer 12

您可以通过添加一个callback来设置高度回到自动状态，从而使Liquinaut的回答响应窗口大小的变化。

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

Answer 13

您的select器似乎不匹配。 你的元素是否具有“第一”的ID，还是每个div中的第一个元素？

更安全的解决scheme是使用“this”：

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

Answer 14

试试这个，

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

Answer 15

这是一个与BORDER-BOX一起工作的…

嗨，大家好。 这是我写的一个jQuery插件来做同样的事情，但也考虑到当你将box-sizing设置为border-box时会发生的高度差异。

我还join了一个“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. // eg, 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)(); }); }; 

我使用的任何参数都可以省略，或者设置为空以接受默认值。 我使用的参数：

• growTo：如果要覆盖所有计算并设置对象将增长到的CSS高度，请使用此参数。
• 持续时间：animation的持续时间（ 显然 ）。
• whenComplete：animation完成时运行的函数。

Answer 16

即使这个线程是旧的，我发布这个答案。 我无法得到接受的答案为我工作。 这个工作很好，很简单。

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

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

然后我只是在点击animation时使用它。

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

我正在使用CSS转换，所以我不使用jQuery的animation，但你可以做同样的animation。

Answer 17

你可能可以用纯CSS解决它，并切换一些类，请参阅： 我如何过渡高度：0; 到高度：auto; 使用CSS？

我相信最大高度的破解是辉煌的

Answer 18

您可以将其存储在数据属性中。

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

Answer 19

我需要这个function多个阅读更多的区域在一个页面上实现这个到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属性。 我用来存储元素的实际（dynamic）高度的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()所有的.read-more元素都在页面加载时在base-height属性中设置了它们的实际高度。 之后，通过jquery css函数设置基础高度。

通过设置我们的两个属性，我们现在可以顺利地在它们之间切换。 只需将data-base改为所需的（固定）高度，然后将.read-more类切换为您自己的ID

你们都可以看到它在小提琴FIDDLE中工作

没有需要jQuery UI

Answer 20

切换幻灯片（ Box9的答案展开）

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