JQuery slideDown lag di animazione

Question

L'animazione della mia diapositiva JQuery rallenta quando si fa scorrere il div #res.

Qualche suggerimento?

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

Per far scorrere un elemento senza saltarlo, l'elemento deve avere una larghezza fissa. Ecco una demo da dimostrare. http://jsfiddle.net/WtkUW/1/

La ragione di ciò è jQuery calcola l'altezza di destinazione dell'elemento in base alla sua larghezza e al suo contenuto. Se la sua larghezza è 100%, jQuery non può calcolare con precisione l'altezza risultante in un salto. Più grande è il contenuto, più grande è il salto.

Answer 2

Prima di tutto, quanto velocemente è la tua page.php di inviare una risposta? Questa potrebbe essere la risposta interamente.

In secondo luogo, si stanno utilizzando 2 metodi in competizione per ottenere risultati una volta completata la chiamata ajax: A) il parametro di successo della chiamata .ajax() e B) la nuova funzione .done().

A. sarà deprecato come di jQuery 1.8 (vedi: jQuery.ajax handling continue responses: "success:" vs ".done"?)

Perché non mettere tutto in .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(); 
}); 

Difficile sapere senza vedere l'esecuzione, ma mescolando questi potrebbe anche essere la fonte di un comportamento inaspettato.