JQuery slideDown动画滞后

滑动#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 += "
"+e.sDo+'
'; }); $('#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发送响应的速度有多快？ 这可能完全是答案。

其次，在ajax调用完成后，您将使用两种竞争方法来完成任务：A）.ajax（）调用的成功参数，以及B）较新的.done（）函数。

A.将从jQuery 1.8开始弃用（参见： jQuery.ajax处理继续响应：“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 += "
"+e.sDo+'
'; }); $('#res').html(result); $('#res').slideDown(); }); 

很难知道没有看到执行，但混合这些也可能是意外行为的来源。