jQuery的slideDown（）问题

Question

Check this code: 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;
    });
});

If you try to insert some text in the input field and click on the submit you can see the issue I'm talking about. When it slides down the height of slide is wrong and the effect is ugly. But if you remove the div info it works well. How can I fix?

Answer 1

Setting:

ul li .info {
    float: left;
}

did it for me (tested in chrome)

Answer 2

This trick seems to solve the issue:

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

Answer 3

The problem is simply the layout model. You can add overflow:hidden to give layout to an element in most browsers:

ul li .info {
  overflow: hidden;
}

Will also solve it. You could fix your width optionally as well, but it's not required.

Bonus pedantic help that you didn't actually ask for:

You're using "return false" to prevent the default event. There's a function for that, which is more efficient in terms of how events bubble. Simply pass the event into the function (you can use any name you want, but I call it "event" for clarity) and then call preventDefault() on it:

$("#test_submit").click(function(event) {
  event.preventDefault()
// ... the rest of your code ... //
});

Answer 4

After playing in JS Fiddle, this seems to have done the trick:

In your CSS, ul li .info { }

Add: height: 50px;