jquery - 如何动画一个 div 打开其内容的大小

Question

我想为一个 div 的打开设置动画以适应其内容的大小。内容来 self 用 .load 调用的单独搜索，因此它可以像一行一样小(没有结果)，也可以包含数百个像素长的多个结果。我已经扫描了许多关于此的帖子并尝试了各种方法，但到目前为止还没有得到任何结果。

我最新的想法是让动画稍微开始一点，让它看起来像是在打开，然后将高度设置为自动，这样它就会跳到最终大小。结果是第一个动画发生，但高度保持在它设置的位置。以下内容取 self 的文档准备功能:

$( "##TwoSearch" ).click(function() {
    $("##div1").animate({ height:0 }, 500).empty(); <!--- close div 1 --->
    $("##div2").animate({ height:200 }, 500);
    SW=document.getElementById("SearchWords").value;
    $("##div2").load("TwoSearchExercise.cfm?SW=" + encodeURI(SW), function () {
        $('.js-lazyYT').lazyYT(); 
        $("##div2").css('height','auto');
        });
    }); 

有没有一种干净的方法来做到这一点？我试图从 div 内部拉高，但它似乎没有做任何事情。

PS:这是一个 ColdFusion 应用程序，所以请忽略 ## 符号。

Answer 1

您的 javascript 有几个错误:第一:不要使用双## 作为选择器，这很容易混淆。第二:您的 javascript 中有 html 注释，这将导致 javascript 错误。html文件中的注释是这样的:<!--comment-->而在 javascript 文件中你可以使用 //comment对于 /* comment */ 的单行注释用于多行注释。

我不得不注释掉您的 ajax 部分，因为我这里没有运行网络服务器，我用 1 秒的超时时间模拟了它。这是更正后的代码:

$( "#TwoSearch" ).click(function() {
    $("#div2").slideUp("fast");
    $("#div1").animate({ height:0 }, 500).empty();
    $("#div2").animate({ height:200 }, 500).empty();
    SW=document.getElementById("SearchWords").value;
    /*$("#div2").load("TwoSearchExercise.cfm?SW=" + encodeURI(SW), function () {
        $('.js-lazyYT').lazyYT(); 
        $("#div2").css('height','auto');
        });*/
        //REMOVE FROM HERE
    window.setTimeout(function() {
        var string = "Lorem upsum dolor sit amet, consectetur adiscip. The quick brown fox jumps over the lazy dog. "
        var loops = Math.floor(Math.random() * 50);
        var finalstring = "";
        for (var i = 0; i < loops; i++) {
            finalstring+=string;
        }
        $("#div2").text(finalstring);
        $("#div2").slideDown("slow");
        //TO HERE, IT'S JUST CREATING RANDOM TEXT TO DEMONSTRATE THE FIDDLE, REPLACE WITH YOUR AJAX CODE
    }, 1000);
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="TwoSearch">TwoSearch</button>
<input type="text" id="SearchWords" >
<div id="div1">
    
</div>

<div id="div2">
    
</div>