Problem z jQuery w slideDown()

Question

Sprawdź ten kod: 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; 
    }); 
}); 

Jeśli próbujesz wstawić jakiś tekst w polu tekstowym i kliknij przesłać możesz zobaczyć problem, o którym mówię. Kiedy przesuwa się w dół, wysokość slajdu jest zła, a efekt jest brzydki. Ale jeśli usuniesz div info, to działa dobrze. Jak mogę naprawić?

Answer 1

Thi s sztuczka wydaje się rozwiązać problem:

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

Answer 2

Po zagraniu w JS Fiddle, wydaje się to zrobić trick:

w twoich CSS, ul li .info { }

Dodaj: height: 50px;

Answer 3

Otoczenie:

ul li .info { 
    float: left; 
} 

zrobił to dla ja (testowane w chromie)

Answer 4

Problem jest po prostu model układu. Możesz dodać przepełnienie: ukryte, aby nadać układ elementowi w większości przeglądarek:

ul li .info { 
    overflow: hidden; 
} 

Rozwiąże również ten problem. Możesz również poprawić swoją szerokość, ale nie jest to wymagane.

Bonus pedantyczny pomaga, że ​​faktycznie nie poprosi o:

Używasz „return false”, aby zapobiec zdarzenie domyślne. Jest na to funkcja, która jest bardziej efektywna pod względem tego, jak wydarzenia się bańczą. Wystarczy przekazać zdarzenie do funkcji (można użyć dowolnej nazwy chcesz, ale ja nazywam to „zdarzenie” dla jasności), a następnie zadzwonić preventDefault() od niego:

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