Problema con jQuery slideDown()

Question

Controllare questo codice: 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; 
    }); 
}); 

Se si tenta di inserire un testo nel campo di immissione e fare clic su l'invio puoi vedere il problema di cui sto parlando. Quando scivola verso il basso, l'altezza della diapositiva è errata e l'effetto è brutto. Ma se si rimuove il div info funziona bene. Come posso risolvere?

Answer 1

Thi s trucco sembra risolvere il problema:

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

Answer 2

Dopo aver giocato in JS Fiddle, questo sembra aver fatto il trucco:

nel CSS, ul li .info { }

Add: height: 50px;

Answer 3

Ambito:

ul li .info { 
    float: left; 
} 

ha fatto per me (testato in cromo)

Answer 4

Il problema è semplicemente il modello di layout. Puoi aggiungere overflow: nascosto per dare il layout a un elemento nella maggior parte dei browser:

ul li .info { 
    overflow: hidden; 
} 

Lo risolverà anche. Puoi anche correggere la tua larghezza, ma non è necessario.

Bonus aiuto saccente che non hai realmente chiedere:

Stai usando "return false" per evitare che l'evento predefinito. C'è una funzione per questo, che è più efficiente in termini di come gli eventi bolla. È sufficiente passare l'evento nella funzione (è possibile utilizzare qualsiasi nome che si desidera, ma mi chiamano "evento" per chiarezza) e quindi chiamare preventDefault() su di esso:

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