使用jQuery将元素动画化为自动高度

Question

我想要动画<div>从高200px到auto高.我似乎无法让它工作.有谁知道怎么样？

这是代码:

$("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动画autoHeight:

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

IMO这是最干净,最简单的解决方案:

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

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

添加回调函数将高度设置为auto可以在动画完成后提供更高的响应能力(credit chris-williams):

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

Answer 3

这与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);

编辑:现在可链接和清洁

Answer 4

更好的解决方案不依赖于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);

https://gist.github.com/2023150

Answer 5

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

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

    })
});

注意:此解决方案需要jQuery UI

Answer 6

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

Answer 7

您始终可以将#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            
    })
});
});?

Answer 8

我设法解决了它:D继承代码.

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

Answer 9

使用slideDown和slideUp

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

Answer 10

您的选择器似乎不匹配。您的元素的 ID 是否为“first”，或者它是每个 div 中的第一个元素？

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

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