Question

我知道这个问题似乎不可能。但我相信有人可以帮助我！

我有一个包含选项和按钮的div，用户选择一个选项并点击“下一步”按钮。

我想要发生的是，带有选项的div需要设置为0px高度的动画，使用ajax加载新内容，然后div需要重新设置内容的新高度...

所以基本上div正在缩小，然后在增长，但在中间，内部HTML正在发生变化！

我到目前为止的代码是：

function load_form( form_name ){
    var form_cont_elem = $("#form_container");
    var collapse_elem = $("#collapsable");

    // animate collapsable div to 0, callback ajax fetch
    collapse_elem.animate({height: "0px"}, 500, function(){

        $.get('/ajax/contact_form/' + form_name + '.html', function(data){
            // hide form container
            form_cont_elem.css({display: ""});
            // load data into form container
            form_cont_elem.html(data);
        });

    });

    // get new height of form
    var height_var = form_cont_elem.outerHeight();
    // remove display:none
    form_cont_elem.css({display: ""});
    // re-animate collapsable div to new height
    collapse_elem.animate({height: height_var}, 500);

}

点击按钮之前是：

<div id="collapsable">
    <div id="form_container">
        <p>What is the Nature of your Question?</p>
        <hr />
        <ul>
            <li><a>Quote</a></li>
            <li><a>Feedback</a></li>
            <li><a>Enquiry</a></li>
            <li><a>Complaint</a></li>
        </ul>
        <button class="blue">Next</button>
        <div class="clear"></div>
    </div>
</div>

按钮点击后的html为：

<div id="collapsable">
    <div id="form_container">
        <form method="post" action="/php/mailer.php">
            <fieldset>
                <input type="hidden" name="quote" />
                <label>Name</label>
                <input type="text" name="name" size="30" maxlength="30" />
                <label>Telephone Contact</label>
                <input type="text" name="telephone" size="30" maxlength="30" />
                <label>Email Address</label>
                <input type="text" name="email" size="30" maxlength="100" />
                <input class="orange" type="submit" name="submit" value="submit!" />
            </fieldset>
        </form>
    </div>
</div>

现在这个javascript代码工作正常......

但是，当我获得#form_container的新高度时，它会返回 OLD 高度......现在我假设这是因为新的信息还没有在浏览器中绘制出来......所以我该如何克服这个？

Answer 1

您是否考虑过使用slideUp和slideDown而不是手动设置特定高度的动画？ slideUp和slideDown在内部为您计算高度。

collapse_elem.slideDown(500);

Answer 2

我发布的太早......

发生了什么，它正在获取ajax，但在等待ajax响应时，它运行下面的代码！的：

var height_var = form_cont_elem.outerHeight();
form_cont_elem.css({display: ""});
collapse_elem.animate({height: height_var}, 500);

所以我只是将代码放在ajax调用中，如此

var form_elem = $("#form_container");
var coll_elem = $("#collapsable");

coll_elem.animate({height: "0px"}, 500, function(){
    $.get('/ajax/contact_form/' + form_name.toLowerCase() + '.html', function(data){
        form_elem.css({display: "none"});
        form_elem.html(data);

        var height_var = form_elem.outerHeight();
        $("#collapsable").animate({height: height_var}, 500);
        form_elem.css({display: ""});
    });
});

javascript / jQuery在绘制之前获取元素高度？

2 个答案: