Issue với slideDown jQuery()

Question

Kiểm tra mã này: 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; 
    }); 
}); 

Nếu bạn cố gắng để chèn một số văn bản trong lĩnh vực đầu vào và click vào trình bạn có thể thấy vấn đề tôi đang nói đến. Khi nó trượt xuống chiều cao của slide là sai và hiệu quả là xấu xí. Nhưng nếu bạn loại bỏ div info nó hoạt động tốt. Làm thế nào tôi có thể sửa chữa?

Answer 1

Thi s lừa dường như giải quyết vấn đề:

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

Answer 2

Sau khi chơi trong JS Fiddle, điều này dường như đã làm các trick:

Trong CSS của bạn, ul li .info { }

Add: height: 50px;

Answer 3

Setting:

ul li .info { 
    float: left; 
} 

đã làm nó cho tôi (được thử nghiệm bằng chrome)

Answer 4

Vấn đề chỉ đơn giản là mô hình bố cục. Bạn có thể thêm tràn: ẩn để cung cấp bố cục cho phần tử trong hầu hết các trình duyệt:

ul li .info { 
    overflow: hidden; 
} 

Cũng sẽ giải quyết. Bạn cũng có thể sửa chiều rộng tùy ý, nhưng không bắt buộc.

Tặng thêm trợ giúp theo dõi mà bạn không thực sự yêu cầu:

Bạn đang sử dụng "return false" để ngăn sự kiện mặc định. Có một chức năng cho điều đó, đó là hiệu quả hơn về cách bong bóng sự kiện. Đơn giản chỉ cần vượt qua sự kiện này vào chức năng (bạn có thể sử dụng bất kỳ tên nào bạn muốn, nhưng tôi gọi nó là "sự kiện" cho rõ ràng) và sau đó gọi preventDefault() vào nó:

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