JQuery slideDown animation lag

Question

My JQuery slide animation lags when sliding the #res div.

Any suggestions?

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 an element without it jumping, the element must have a fixed width. Here's a demo to demonstrate. http://jsfiddle.net/WtkUW/1/

The reason for this is jQuery calculates the target height of the element based on its width and its content. If its width is 100%, jQuery can't accurately calculate the height resulting in a jump. The larger the content, the larger the jump.

Answer 2

First of all, how fast is your page.php sending a response? That may be the answer entirely.

Second, you're using 2 competing methods for getting stuff done once the ajax call is complete: A) the success parameter of the .ajax() call, and B) the newer .done() function.

A. will be deprecated as of jQuery 1.8 (see: jQuery.ajax handling continue responses: "success:" vs ".done"?)

Why not put everything 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();
});

Hard to know without seeing the execution, but mixing these could also be the source of unexpected behavior.