6

滑动#resdiv 时，我的 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;

}
4

3 回答 3

12

要在不跳跃的情况下向下滑动元素，该元素必须具有固定的宽度。这是一个演示。http://jsfiddle.net/WtkUW/1/

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

于 2012-08-06T15:29:37.153 回答
1

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

其次，一旦 ajax 调用完成，您将使用 2 种相互竞争的方法来完成工作：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();
});

不看执行就很难知道，但混合这些也可能是意外行为的根源。

于 2012-08-06T15:14:38.160 回答
0

对于任何对此仍有疑问的人，我的问题是我的padding设置!important可能会覆盖动画的效果

于 2021-04-13T22:22:02.023 回答