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;

}

- John

---

你能否提供一个关于在 http://jsfiddle.net 中延迟的示例？ - Rory McCrossan

它是卡顿还是跳跃。在这个上下文中，卡顿是什么意思？ - Kevin B

另外，我有一个一般性的观察，你似乎有重复的ID（“outer”），这是无效的，尽管与你目前的问题无关。 - Kevin B

@KevinB 是的，它会跳。对于第一行结果，它会滑动一秒钟，然后跳到末尾。 - John

@John 这是slideDown动画中非常常见的问题。最常见的解决方法是给元素一个固定的宽度。jQuery通过将其显示在页面外来计算该元素的宽度，以查看其高度，然后将其向下滑动到该高度，然后设置为display:block并让其自己设置高度。这就是跳跃发生的地方。由于它的宽度是100％，jQuery无法知道它应该有多宽，在这一点上，它的高度比预期的要短，导致跳跃。 - Kevin B

Answer 1

为了让元素在滑动时不出现跳动，必须给该元素设置一个固定宽度。以下是演示示例。http://jsfiddle.net/WtkUW/1/ 这是因为jQuery根据元素的宽度和内容计算元素的目标高度。如果元素的宽度为100%，jQuery就无法准确计算其高度，从而导致跳动。内容越多，跳动越大。

- Kevin B

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 += "<div id='outer'>"+e.sDo+'</div>';
    });
    $('#res').html(result);

    $('#res').slideDown();
});

没有看到执行情况很难知道，但混合使用它们也可能是意外行为的源头。

- Faust

Answer 3

对于仍然有这个问题的任何人，我的问题是我使用了!important来设置padding，这可能会覆盖动画效果。

- Ree