JQuery slideDown animation lag

Question

Hoạt ảnh trang trình bày JQuery của tôi bị chậm khi trượt #res div.

Mọi đề xuất?

JQuery:

$(document).ready(function(){ 

$('select.first').change(function(){ 

    $(this).prop('disabled', true); 
    var codata = $(this).val(); 
    var page = 1; 

    $.ajax({ 

     type:'POST', 
     url:'page.php', 
     dataType:'json', 
     data:{country:codata, page:page}, 
     success: function(data) { 

      var result=''; 
      $.each(data, function(i,e) { 
      result += "<div id='outer'>"+e.sDo+'</div>'; 
      }); 
      $('#res').html(result); 

     } 


    }).done(function(){$('#res').slideDown();}); 

}); 

}); 

CSS:

#res { 

    background-color:gainsboro; 
    border:1px solid gray; 
    width:100%; 
    display:none; 
    padding-top:10px; 
} 


#outer { 

    width:100px; 
    text-align:center; 
    border:1px dotted black; 
    margin:0 0 10px 10px; 
    display:inline-block; 
    height:40px; 

} 

Answer 1

Để trượtĐổi phần tử mà không cần nhảy, phần tử phải có chiều rộng cố định. Đây là một bản demo để chứng minh. http://jsfiddle.net/WtkUW/1/

Lý do cho điều này là jQuery tính toán chiều cao mục tiêu của phần tử dựa trên chiều rộng và nội dung của nó. Nếu chiều rộng của nó là 100%, jQuery không thể tính chính xác chiều cao dẫn đến một bước nhảy. Nội dung càng lớn thì bước nhảy càng lớn.

Answer 2

Trước hết, làm thế nào nhanh chóng được page.php bạn gửi một phản ứng? Đó có thể là câu trả lời hoàn toàn.

Thứ hai, bạn đang sử dụng 2 phương pháp cạnh tranh để hoàn thành công việc khi cuộc gọi ajax hoàn tất: A) tham số thành công của cuộc gọi .ajax() và B) hàm .done() mới hơn.

A. sẽ bị phản đối như jQuery 1.8 (xem: jQuery.ajax handling continue responses: "success:" vs ".done"?)

Tại sao không đặt tất cả mọi thứ trong .done():

$.ajax({ 
    type:'POST', 
    url:'page.php', 
    dataType:'json', 
    data:{country:codata, page:page}  
}) 
.done(function(data) { 

    var result=''; 
    $.each(data, function(i,e) { 
    result += "<div id='outer'>"+e.sDo+'</div>'; 
    }); 
    $('#res').html(result); 

    $('#res').slideDown(); 
}); 

Khó biết mà không nhìn thấy thực hiện, nhưng pha trộn những cũng có thể là nguồn gốc của hành vi bất ngờ.