6

#resdivをスライドすると、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;

}
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 に答える