动画高度/宽度到“自动” | CSS-Tricks

无法执行 thing.animate({ "height": "auto" });。因此，这是 Darcy Clarke 的方法，允许该方法工作。您实际上克隆了元素，删除了当前影响元素的固定高度，并测量/保存了该值。然后，您将真实元素动画到该值。

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

Colton

# 2012 年 1 月 2 日

如果您遇到调整大小问题，其中元素（调整大小后）大于其父元素，请替换

.appendTo("body");

为

.appendTo(el.parent());

Gray

# 2012 年 5 月 11 日

如果您尝试对内联元素（如段落）的高度进行动画处理，则需要确保您没有将宽度也更改为“自动”。您需要将此行更改为

el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");

为

el = jQuery(el), elem = el.clone().css({"height":"auto"}).appendTo("body");

Harry

评论永久链接# 2013 年 12 月 10 日

段落是一个块级元素。

Mike

# 2012 年 10 月 26 日

尽管我希望它能正常工作，但我现在遇到了两个单独的实例，其中使用此方法无效。逻辑完全存在——克隆、检查，然后进行动画处理——但无论出于何种原因，对我来说都令人沮丧地固执。我得到的高度要么太大，要么太小。我随后为此找到了两种解决方法

第一种是让内容自然加载，在页面加载后获取高度，然后立即添加一个类，将框“调整大小”到所需的高度。它看起来像这样


var refheights = [];

$(document).ready(function(){
    setTimeout(function(){
        $('.these').children('div').each(function(e){
            refheights[e] = $(this).height();
        });
    },500);
});

setTimeout 让网络字体在获取高度之前加载：事实证明，这些字体在某些浏览器中直到最后才会加载，并且会给出错误的读数。这对于位置也同样有效，类似地避免了 setTimeout 的相同陷阱。然后，在需要使用高度时，只需将动画设置为数组中的给定值即可。


$(this).animate({'height':refheights[($(this).index())-1]}, 800);

如果您无法为元素分配索引，或者元素的内容是动态的，只需为您想要进行动画处理的项目提供一个包装器，并将它的溢出设置为隐藏


<div class="wrapper">
    <div class="content"></div>
</div>


.wrapper{
    overflow:hidden;
    height:178px;
}

然后将包装器的动画设置为内部元素的高度，它看起来像是动态地动画到了给定的高度


$('.wrapper').animate({'height':$('.content').height()},800);

我确信有更好的方法来编程地完成这两件事，但它们对我来说效果很好。

哦，还有，非常感谢这个网站。我希望有朝一日能给你买一杯啤酒，Coyier 先生。

Steve

# 2013 年 2 月 14 日

大多数时候有一种更简单的方法。

不要尝试对高度进行动画处理，而是对最大高度进行动画处理。

当您想要隐藏它时，max-height:0px 可以完成工作，当您想要显示它时，您可以将其动画设置为 max-height:10000px;…. 然后它将动画到其正常高度。

只要确保在过渡声明中使用 max-height 而不是 height。

Darryl

评论永久链接# 2013 年 5 月 27 日

Steve，你真是个好人！

最大高度以一种好的方式彻底震撼了我的世界。 couldn't have been easier。

谢谢！
Steve

评论永久链接# 2013 年 5 月 28 日

没问题。很高兴能帮到您！
Austin Crane

评论永久链接# 2013 年 12 月 4 日

不得不评论这种简单的方法！非常感谢！
Ben

评论永久链接# 2013 年 12 月 28 日
喜欢它——谢谢，Steve！

以下是我与最大宽度一起使用的简单 jQuery，用于在 div 中使用 onclick 显示菜单。请记住，您正在调整的元素上的任何填充都会导致该部分元素显示。这对我来说是好的（它允许在代码中看到您看到的“«”和“»”，这是用户用来显示/隐藏菜单的内容），但是如果您不想要这样做，请确保添加一些额外的代码来添加/删除填充。
```
function toggleHorizontal(hidden_id, click_id){
    if($('#'+hidden_id).css('max-width') == "0px"){
        $("#"+hidden_id).animate({"max-width":"350px"}, 300);
        $("#"+click_id).html('&raquo;');
    }else{
        $('#'+hidden_id).animate({"max-width":"0px"}, 300);
        $("#"+click_id).html('&laquo;');
    }
}
```
然后只需将 div 设置为max-width: 0px; initially，应用 onclick="toggleHorizontal('hidden_id', 'click_id')" 然后就完成啦！希望有人能像我一样发现 Steve 的建议有帮助。
Rob

评论永久链接# 2014 年 2 月 21 日

但是，当高度很小时，动画将会有严重的延迟。知道高度是多少会使动画更加一致。
Caleb

评论永久链接# 2014 年 6 月 25 日

哇，Steve，你真是太棒了！我真不敢相信我从未听说过这种方法，它完美地运行了。谢谢！
Joseph

评论永久链接# 2015 年 4 月 29 日

Steve，你太棒了！
Bat

评论永久链接# 2015 年 8 月 4 日

我现在爱上你了。

Robert

# 2013 年 6 月 26 日

您好，

有人遇到了类似的问题，为了解决它，我刚在 stackoverflow 上写了

http://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none/12114088#12114088

将它复制并粘贴到 body 中的问题是，实际宽度和高度可能有所不同，因此它实际上取决于 CSS 上下文（CSS-DOM 位置），如果您将其直接粘贴到 body 中，DOM-Element 可能会脱离某些父 CSS 规则。

我还没有任何稳健的解决方案，可以解决这个问题。因此，我将进一步研究 Shadow-DOM（也许这可以使其变得稳健）。

Marcin

# 2013 年 7 月 23 日

Steve，这真是太聪明了。谢谢 Chris 强调这一点，你真棒。

StepanVich

# 2013 年 9 月 24 日

嗨，我遇到这个脚本的问题！当我将其添加到我的网站时，我总是得到这个错误：对象 [object global] 没有方法“each”。错误可能出现在第 3 行。您知道如何解决吗？

BrunoJ

评论永久链接# 2013 年 10 月 11 日

Stepan，您是否将 JQuery 包含在您的脚本中？

Wesley

# 2013 年 10 月 11 日

我使用了您的代码。谢谢！

我不得不进行一些更改来解决一个普遍的担忧。

想象一下，如果克隆元素在 body 中，而不在原始元素的位置（比如只通过父元素的类应用的样式），则某些样式不会应用于克隆元素。

为了解决这个问题，我将克隆元素追加到原始元素的父元素中。为了防止克隆元素的边缘情况闪烁，我在 .css(...) 方法中添加了 "visibility":"hidden"。

我还对克隆元素执行了 .removeAttr("id")，这可能需要防止其他插件通过 id 对克隆元素进行操作。这可能是一个参数选项，因为您可能希望该元素与通过 id 对原始元素进行操作的任何插件保持同步。

再次感谢您用您的代码解决我的问题。

Martin Staflund

评论永久链接# 2014 年 12 月 26 日
您好，

为什么克隆元素来获取高度，难道将元素暂时定位（并显示）在其相对定位的父元素的最左边不会更简单（更快）吗？例如，通过向元素添加这样的类
```
.expandMe{
 position:absolute;
 left:-9999px;
 display:block;
}
```

Charles Kwok

# 2013 年 10 月 21 日

原始代码有几个问题。
首先，元素动画到了所需的“自动”高度或宽度，正确，但在结束时，高度或宽度是固定的。因此，如果元素的内容增长，它不会在 css 高度或宽度设置为“自动”时适当容纳。
其次，克隆元素始终追加到“BODY”。根据您的 DOM CSS 样式，它可能与您在 DOM 位置上的预期不同。
我已经对代码进行了一些修改来“修复”这些问题。

第一个问题通过添加一行来设置 css 为“自动”得到解决，例如“宽度”的情况
$(this).css({width: 'auto'});，在动画完成后。

第二个问题通过 .insertAfter() 原始元素而不是 .appendTo() BODY 来解决，BODY 的上下文可能无法呈现所需的“自动”高度或宽度。但是，根据您的 CSS，此修复仍然存在限制。但我预计这种情况应该很少发生。

无论如何，感谢您分享代码，它为我节省了一些编写代码的时间。^_^

    $.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"}).insertAfter(this);
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();

        if (prop === "height"){
            el.animate({"height":height}, speed, function(){
                $(this).css({height: 'auto'});
                if (typeof callback !== 'undefined') {
                    callback();
                }
            });
        }
        else if (prop === "width") {
            el.animate({"width":width}, speed, function(){
                $(this).css({width: 'auto'});
                if (typeof callback !== 'undefined') {
                    callback();
                }
            });
        }
        else if (prop === "both"){
            el.animate({"width":width,"height":height}, speed, function(){
                $(this).css({width: 'auto', height: 'auto'});
                if (typeof callback !== 'undefined') {
                    callback();
                }
            });
        }
    });
};

David Clark

# 2013 年 12 月 16 日

如果有人发现自己在这些评论的底部——我正在尝试为这个过于常见的问题创建一个可靠的解决方案，该问题不仅出现在评论或博客文章中，而且也出现在 Github 上。

https://github.com/davidtheclark/jquery.animateAuto

我相信我已经将人们上面分享的想法以及我自己的想法纳入了其中——我希望其他人愿意为开发一个完全可靠、可靠且可重复使用的解决方案做出贡献。让我们共同努力。

Balamurugan

# 2014 年 8 月 13 日

非常感谢 Steve。你救了我。

Trung

# 2014 年 12 月 16 日

animateToAutoHeight 函数工作正常。
http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height

Jon

# 2015 年 3 月 30 日

Steve，你太棒了。

Muhammad Farooq

# 2015 年 9 月 28 日

哇。
我的意思是，我的水平和专家一样：P
我刚刚写了相同的代码。只是想知道人们是如何编写代码来获得这个结果的，然后我找到了你.. :) 你写了相同的代码..

这是否意味着我是一个好的程序员，或者你并不像我一样优秀：)

谢谢

Christophe Correia

# 2016 年 11 月 21 日

非常感谢你提供这段代码。你救了我的命

Tim

# 2017 年 7 月 7 日

似乎克隆由于其在 DOM/CSS DOM 中的位置会导致一些问题。对脚本做了一些小的修改，以确保你总是通过简单地使用原始元素来获得“auto”高度和宽度。可能对某人有用。哦，还为 prop、speed 和 callback 添加了一些逻辑默认值。

jQuery.fn.animateAuto = function(prop, speed, callback){
    var beginCache, endCache;

    prop = prop || 'both';
    speed = speed !== null ? 200 : speed;
    callback = callback || function() {};

    return this.each(function(i, el){
        el = jQuery(el);

    // store current height/width dimensions
    beginCache = {width: el.css("width"), height: el.css("height")};

    // set to auto and store width/height dimensions
    el.css('width', 'auto');
    el.css('height', 'auto');
    endCache = {width: el.css('width'), height: el.css('height')};

    // revert back to original dimensions
        el.css(beginCache);

        // animate to auto
        if(prop === "height")
            el.animate({"height":endCache.height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":endCache.width}, speed, callback);  
        else if(prop === "both")
            el.animate(endCache, speed, callback);
    });  
};

评论

发表评论 取消回复

发表评论取消回复