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文件中的注释如下所示：在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>

如何将div开口设置为其内容大小的动画

1 个答案: