如何使用 jQuery 将元素动画到其自然高度 [重复]答案

【问题标题】：How can I Animate an Element to its natural height using jQuery [duplicate]如何使用 jQuery 将元素动画到其自然高度 [重复]
【发布时间】：2023-04-04 14:22:01
【问题描述】：

我试图让一个元素动画到它的“自然”高度 - 即如果它有 height: auto; 的高度。

我想出了这个：

var currentHeight = $this.height();
$this.css('height', 'auto');
var height = $this.height();
$this.css('height', currentHeight + 'px');

$this.animate({'height': height});

有没有更好的方法来做到这一点？感觉有点像 hack。

编辑：这是一个完整的脚本，可供任何想要测试的人使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
    <head>
        <title>jQuery</title>
        <style type="text/css">
            p { overflow: hidden; background-color: red; border: 1px solid black; }
            .closed { height: 1px; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
        $().ready(function()
        {
            $('div').click(function()
            {
                $('p').each(function()
                {
                    var $this = $(this);

                    if ($this.hasClass('closed'))
                    {
                        var currentHeight = $this.height();
                        $this.css('height', 'auto');
                        var height = $this.height();
                        $this.css('height', currentHeight + 'px');

                        $this.animate({'height': height});
                    }
                    else
                    {
                        $this.animate({'height': 1});
                    }

                    $this.toggleClass('closed');
                });
            });
        });
        </script>
    </head>

    <body>

        <div>Click Me</div>
        <p>Hello - I started open</p>
        <p class="closed">Hello - I started closed</p>

    </body>
</html>

【问题讨论】：

别忘了修改 $this 变量 Greg

标签： javascript jquery css

【解决方案1】：

我允许自己回答这个帖子，即使它很久以前就已经回答过了，因为它只是帮助了我。

其实第一个答案我没看懂：为什么要打开一个半封闭的元素来获取它的高度，然后再关闭它？

一开始，你隐藏了元素，只显示了它的一部分，对吧？最好的方法（我相信）是使用 javascript 做好准备。因此，当您隐藏元素 onready 时，只需将 orig 高度保存在 var 中，这样您就不必使用 hide(onready)-show-save height-hide 来切换元素的可见性。

看看我做了什么，效果很好：

$(document).ready(function(){
var origHeight = $("#foo").css('height');
$("#foo").css({"height" : "80px"});
$("#foo .toggle").bind("click", function(event){ toggleFoo(event, lastSearchesMidHeight); });
});

在这里，当你调用你的切换函数时，你知道你的原始元素高度是多少，而无需左右晃动。

我写得很快，希望它可以帮助将来的人。

【讨论】：

这是一个更好的答案。谢谢。

【解决方案2】：

我找到的最简单的解决方案是简单地用一个高度有限的 div 包装内容元素并设置为溢出：隐藏。这会将内部内容元素截断为包装 div 的高度。当用户单击、悬停等以显示内容元素的完整高度时 - 只需将包装 div 设置为内部内容 div 的高度即可。

【讨论】：

我喜欢这个解决方案，它非常干净、灵活，并且是避免进行一些可能因内容而中断的 js 计算的绝佳方式。最棒的托拜厄斯！！

【解决方案3】：

我可以建议一个同样骇人听闻的解决方案...克隆该元素，将其放置在视野之外，并获取其高度...然后将其删除并为您的原始元素设置动画。

除此之外，您还可以使用 $.slideUp() 和 $.slideDown()：

$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;

如果您需要保留 1px 的线，您可以将其与父元素一起应用：

<div style='border-top:1px solid #333333'>
  <div class='toggleMe'>Hello World</div>
</div>

并在 .toggleMe div 上应用上滑/下滑。

【讨论】：

听起来它可以工作，但我不确定它是否会有所改进:) 我有什么工作但我是 jQuery 新手，所以我认为必须有一种非 hacky 方式
您决定不使用 $.slideUp() 和 $.slideDown() 的任何原因？
我需要它停止在 1px 高度，我认为这些功能不可能（虽然可能是错误的）
如果这很重要的话，它还需要能够在 jQuery 开始运行之前以关闭或打开状态启动
1px 的高度可以通过切换元素周围的元素来模拟吗？
?

【解决方案4】：

如果可以的话，我也想加入这个旧线程，以防我的解决方案对任何人有帮助。我的具体情况是这样的：我有一些设置了最大高度值的 div，将它们限制为三行高，当用户将鼠标悬停在它们上时，我希望它们扩展到它们的自然高度；并且当鼠标光标离开 div 时，我希望它们缩小到剪裁的最大三行高度。我需要使用 CSS 最大高度属性，而不是高度，因为我有一些只包含一两行文本的 div，我不希望它们不必要地高。

我尝试了此线程中的许多解决方案，其中一个对我有用的是 Jonathan Sampson 提出的涉及克隆元素的“hackish 建议”。我将他的想法翻译成下面的代码。请随时提出改进建议。

这些函数被委托给父元素来处理通过 Ajax 调用创建的 div。 div.overflow_expandable 类具有以下声明：{ max-height: 5em; overflow: hidden; }

$('#results').delegate('div.overflow_expandable', 'mouseenter', function() {
    var $this = $(this);

    // Close any other open divs
    $('#results div.overflow_expandable').not($(this)).trigger('mouseleave');

    // We need to convert the div's current natural height (which is less than
    // or equal to its CSS max-height) to be a defined CSS 'height' property, 
    // which can then animate; and we unset max-height so that it doesn't 
    // prevent the div from growing taller.
    if (!$this.data('originalHeight')) {
        $this.data('originalHeight', $this.height());
        $this.data('originalMaxHeight', parseInt($this.css('max-height')));
        $this.css({ 'max-height':'none',
            height: $this.data('originalHeight') });
    }

    // Now slide out if the div is at its original height 
    // (i.e. in 'closed' state) and if its original height was equal to
    // its original 'max-height' (so when closed, it had overflow clipped)
    if ($this.height() == $this.data('originalHeight') && 
        $this.data('originalMaxHeight') == $this.data('originalHeight')) {
        // To figure out the new height, clone the original element and set 
        // its height to auto, then measure the cloned element's new height;
        // then animate our div to that height
        var $clone = $this.clone().css({ height: 'auto', position: 'absolute', 
            zIndex: '-9999', left: '-9999px', width: $this.width() })
            .appendTo($this);
        $this.animate({ height: $clone.height() }, 'slow');
        $clone.detach();
    }
}).delegate('div.overflow_expandable', 'mouseleave', function() {
    var $this = $(this);
    // If the div has 'originalHeight' defined (it's been opened before) and 
    // if it's current height is greater than 'originalHeight' (it's open 
    // now), slide it back to its original height
    if ($this.data('originalHeight') &&
        $this.height() > $this.data('originalHeight'))
        $this.animate({ height: $this.data('originalHeight') }, 'slow');
});

【讨论】：

【解决方案5】：

找到这篇文章并最终使用 Greg 最初的 1px 建议 - 效果很好！

刚刚为 animate 函数添加了一个回调，以便在动画结束时将元素的高度设置为“自动”（在我的情况下，该特定元素的内容可能会改变并变大）。

【讨论】：

【解决方案6】：

$('div').click(function() { 
    if($('p').is(':hidden')) {
       $('p').slideUp();
    } else {
       $('p').slideDown(function() { $('p').css('height','1px'); });
    }
}

一旦它们完成滑动，应该将 p 标签的高度设置为 1px。

【讨论】：

这会将每个 p-tag 的高度设置为 1px。
$(this).css('height','1px');那应该没问题。
您将它应用到 slideDown() 方法的回调中，这意味着一旦它可见，它将再次被隐藏。您的意思是为上滑设置它吗？
嗯，我想我的显示/隐藏功能搞混了，是的。无论哪种方式，让显示/隐藏功能工作都应该比检查高度等简单得多。

【解决方案7】：

这对我有用。

<div class="product-category">
    <div class="category-name">
        Cars
    </div>
    <div class="category-products" style="display: none; overflow: hidden;">
        <div class="product">Red Car</div>
        <div class="product">Green Car</div>
        <div class="product">Yellow Car</div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.product-category .category-name').click(function() {
        if ($(this).parent().hasClass('active')) {
            $(this).parent().removeClass('active');
            var height = $(this).parent().find('.category-products').height();
            $(this).parent().find('.category-products').animate({ height : '0px' }, 600, function() {
                $(this).parent().find('.category-products').height(height).hide();
            });
        } else {
            $(this).parent().addClass('active');
            var height = $(this).parent().find('.category-products').height();
            $(this).parent().find('.category-products').height(0).show().animate({ height : height + 'px' }, 600);
        }
    });
});
</script>

【讨论】：

【解决方案8】：

我的解决方案是在关闭按钮的data 属性中存储容器的原始大小（也可以存储在容器本身中，如果您不使用相同的按钮也再次显示容器）：

$(document).ready(function(){
    $('.infoBox .closeBtn').toggle(hideBox, showBox);
});

function hideBox()
{
    var parent = $(this).parent();

    $(this).text('Show').data('originalHeight', parent.css('height'));

    parent.animate({'height': 20});
    return false;
}

function showBox()
{
    var parent = $(this).parent();

    $(this).text('Hide');

    parent.animate({
        'height': $(this).data('originalHeight')
    });
    return false;
}

【讨论】：

【解决方案9】：

我想指向this answer，它建议使用 animate() 函数将高度设置为“显示”。我必须编辑我的“slideUp”样式动画以使用 height:"hide" 来使用它。

【讨论】：