jQuery的slideDown()问题

Question

检查此代码:http://jsfiddle.net/ZXN4S/1/

HTML:

<div class="input">
    <input type="text" size="50" id="test_input">
    <input type="submit" value="send" id="test_submit">
</div>

<ul>
    <li class="clear">
        <div class="comment">
           <div class="image">
            <img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
           </div>
           <div class="info">
             <div class="name">Name</div>
             <div class="text">text</div>
             <div class="timestamp">timestamp</div>
           </div>
        </div>
    </li>
</ul>

jQuery的:

$(document).ready(function() {
    $("#test_submit").click(function() {
        $.post('/echo/json/', function(data) {
            last = $("ul li:first-child");
            new_line = last.clone();
            new_line.hide();
            last.before(new_line);
            new_line.slideDown('slow');
        });

        return false;
    });
});

如果您尝试在输入字段中插入一些文本并单击提交,您可以看到我正在谈论的问题.当它向下滑动时,滑块的高度是错误的,效果很难看.但如果你删除div info它运作良好.我该怎么办？

Answer 1

这个技巧似乎可以解决这个问题：

ul li .info {
    float: right;
    width: 485px; // fixed width to the div
}