如何為div開口動畫以使其內容大小

Question

我想設置一個div的動畫，以適應其內容的大小。 內容來自我用.load調用的單獨搜索，因此它可能只有一行（沒有結果），也可能包含數百個像素長的多個結果。 我已經掃描了許多關於此的帖子，並嘗試了各種方法，但到目前為止還沒有任何結果。

我的最新想法是開始少量動畫，以使其看起來像是打開的，然后將高度設置為自動，以使其跳至最終大小。 結果是發生了第一個動畫，但是高度保持在它設置的位置。 以下內容來自我的文檔准備功能：

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