0

jQuery で AJAX による単純なロード コンテンツを作成しました。

$('.bar a[rel]').live('click', function() {
    if($('.modal-'+ $(this).attr('rel')).length == 0) {
        $.ajax({
            url: 'users/'+ $(this).attr('rel'),
            success: function(data) {
                $('header + .container').children().animate({
                    'height': 0,
                    'padding': 0,
                    'opacity': 0
                }, 500, function() {
                    $(this).remove();

                    $(data).hide().appendTo('header + .container').fadeIn(1000);
                });                 
            }
        });
    }

    return false;
});

このコードがコンテンツ (appendTo) を 2 回ロードするのはなぜですか?

4

1 に答える 1

1

アニメーション コードは、それぞれの子に対して 1 回実行されます。HTML を提供していませんが、2 回実行されるため、2 つあると想定しても安全だと思います。親で直接機能するように関数を修正します。

$('header + .container').animate({
    'height': 0,
    'padding': 0,
    'opacity': 0
}, 500, function () {
    $(this).empty();

    $(data).hide().appendTo('header + .container').fadeIn(1000);
});

達成しようとしている効果に応じて、子のアニメーションをキューに入れ、すべてが完了した後にのみデータを追加するなど、他の代替手段があります。もっと大雑把な方法として、少なくとも子の長さとアニメーション時間の倍数 (この場合は 500 ミリ秒) だけデータの追加を遅らせることもできます。それは本当にあなたがどのように見せたいかによって異なりますが、どういうわけか単純なアプローチでうまくいくと思います.

PS あなたのセレクターは奇妙に見えますが、追加機能がまったく機能しているので、このフォーラムの目的のための省略形またはタイプミスであると思われます。そうでなければ、何かが間違いなく間違っています。

于 2013-01-05T11:23:19.413 に答える