JQuery slideDownアニメーションラグ

Question

#res divをスライドすると、JQueryのスライドアニメーションが遅れます。

提案がありますか？

は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

スライドするにはジャンプせずに要素を固定幅にする必要があります。デモンストレーションしてみましょう。 http://jsfiddle.net/WtkUW/1/

これは、jQueryが要素の幅と内容に基づいてターゲットの高さを計算するためです。幅が100％の場合、jQueryは高さを正確に計算してジャンプすることはできません。内容が大きくなるほどジャンプが大きくなります。

Answer 2

まず、どのくらいの速あなたのpage.phpがレスポンスを送信していますか？それは完全に答えかもしれません。

第2に、ajax呼び出しが完了した後に、A）成功するための2つの競合するメソッドを使用しています：A）.ajax（）呼び出しの成功パラメータ、およびB）新しい。

A.は、jQueryの1.8で廃止されます

（参照：jQuery.ajax handling continue responses: "success:" vs ".done"?）を

なぜ（の.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(); 
}); 

実行を見ずに知ることは難しいが、これらを混合予想外の動作の原因となる可能性もあります。