Problema con slideDown de jQuery()

Question

Comprobar este código: 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; 
    }); 
}); 

Si se intenta insertar un texto en el campo de entrada y haga clic en el envío puede ver el problema del que estoy hablando. Cuando se desliza, la altura de la diapositiva es incorrecta y el efecto es feo. Pero si elimina el div info, funciona bien. ¿Cómo puedo arreglarlo?

Answer 1

Thi s truco parece resolver el problema:

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

Answer 2

Después de jugar en JS violín, esto parece haber hecho el truco:

En tu CSS, ul li .info { }

Añadir: height: 50px;

Answer 3

Marco:

ul li .info { 
    float: left; 
} 

lo hizo por yo (probado en cromo)

Answer 4

El problema es simplemente el modelo de diseño. Puede agregar overflow: hidden para dar el diseño de un elemento en la mayoría de los navegadores:

ul li .info { 
    overflow: hidden; 
} 

también lo resolverá. También puedes arreglar tu ancho opcionalmente, pero no es obligatorio.

Bono ayuda pedante que en realidad no pide:

Usted está utilizando "return false" para evitar que el evento predeterminado. Hay una función para eso, que es más eficiente en términos de cómo los eventos burbujean. Basta con pasar el evento en la función (se puede utilizar cualquier nombre que desee, pero yo lo llamo "evento" para mayor claridad) y luego llamar preventDefault() en él:

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