JQuery向下滑动动画延迟

滑动

#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();});

});

});

#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;

}

---

首先，page.php发送响应的速度有多快？这可能是完全正确的答案

其次，在ajax调用完成后，您将使用两种相互竞争的方法来完成任务：A）调用.ajax（）的success参数，B）更新的.done（）函数

A.将从jQuery 1.8开始被弃用（请参阅：）

为什么不把所有的东西都放进去。完成（）

$.ajax({
类型：'POST'，
url:'page.php'，
数据类型：'json'，
数据：{国家：codata，页码：}
})
.完成（功能（数据）{
var结果=“”；
$。每个（数据、功能（即）{
结果+=“”+e.sDo+“”；
});
$（'#res'）.html（结果）；
$（'#res'）.slideDown（）；
});

---

如果看不到执行情况，就很难知道，但是混合使用这些元素也可能是意外行为的来源。

要向下滑动元素而不使其跳跃，元素必须具有固定的宽度。这里有一个演示

---

原因是jQuery根据元素的宽度和内容计算元素的目标高度。如果宽度为100%，jQuery无法准确计算导致跳跃的高度。内容越大，跳转越大。

对于任何对此仍有问题的人，我的问题是我的

填充设置了
！重要信息
可能覆盖了动画的效果
您可以在a中提供这种滞后的示例吗？它是滞后还是跳跃。在此上下文中，延迟是什么意思？另外，只是一个一般观察，看起来您有重复的ID（
外部
），这是无效的，但与您当前的问题无关。@KevinB是的，它会跳转。它滑动一秒钟（对于第一行结果），然后跳到最后。@John这是slideDown动画的一个常见问题。最常见的修复方法是给元素一个固定的宽度。jQuery通过在页面上显示该元素来计算其宽度，查看其高度，然后将其向下滑动到该高度，然后将其设置为display:block，并让其设置自己的高度。这就是跳跃发生的地方。由于它的宽度是100%，jQuery无法知道它应该有多宽，此时它的高度比预期的要短，从而导致跳转。
$.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();
});