Desplazamiento de animación de JQuery slideDown

Question

Mi animación de diapositivas de JQuery está rezagada al deslizar el div #res.

¿Alguna sugerencia?

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

To slideDown un elemento sin saltar, el elemento debe tener un ancho fijo. Aquí hay una demostración para demostrar. http://jsfiddle.net/WtkUW/1/

La razón para esto es jQuery calcula la altura del elemento en función de su ancho y su contenido. Si su ancho es del 100%, jQuery no puede calcular con precisión la altura que da como resultado un salto. Cuanto mayor sea el contenido, mayor será el salto.

Answer 2

En primer lugar, qué tan rápido está enviando su page.php una respuesta? Esa puede ser la respuesta por completo.

En segundo lugar, está utilizando 2 métodos de la competencia para hacer las cosas una vez que se completa la llamada ajax: A) el parámetro de éxito de la llamada .ajax() y B) la función .done() más reciente.

A. dejará de estar disponible a partir de jQuery 1.8 (véase: jQuery.ajax handling continue responses: "success:" vs ".done"?)

por qué no poner todo en .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(); 
}); 

Es difícil saber sin ver la ejecución, pero la mezcla de éstos también podría ser la fuente de un comportamiento inesperado.