Problem with 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 the "Submit" button, you will see the problem I'm talking about. When it slides down, the height of the slide is wrong, and the effect is ugly. But if you remove the div info, it works well. How can i fix it?

Answer 1

This trick seems to solve the problem:

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

Answer 2

Installation:

ul li .info {
    float: left;
}

did it for me (tested on chrome)

Answer 3

- . : , :

ul li .info {
  overflow: hidden;
}

. , .

, :

You use "return false" to prevent the default event. There is a function for this, which is more effective in terms of how events bubble up. Just pass the event to a function (you can use whatever name you want, but I call it an “event” for clarity) and then call preventDefault()it:

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

Answer 4

After playing JS Fiddle, this seems to accomplish the trick:

In your CSS, ul li .info { }

Add: height: 50px;