0

ここでは、このコードを使用して、一連のタブ内の特定のクラスのコンテンツを切り替えています。これがスクリーンショットです：

ここに画像の説明を入力してください

フェードイン、フェードアウト効果はうまく機能しますが、新しいページのフェードイン効果がすでに開始された後、新しいページが「ロード」されているのを見ることができます。そして、それは遅い移行に設定されています！フェード効果はページの読み込みにまったく関係していないように見えますが、これは物事を先送りしていると思います。移行をよりスムーズにする方法はありますか？

コードは次のとおりです。

jQuery(document).on("click",".nav-tab", function(e){ 
    e.preventDefault();
jQuery('.page-form').fadeOut('slow').load(jQuery(this).attr('href') + ' .page-form');
jQuery('.page-form').fadeIn('slow').load(jQuery(this).attr('href') + ' .page-form');
});
4

1 に答える 1

1

2回目の電話：

jQuery('.page-form').fadeIn('slow').load(jQuery(this).attr('href') + ' .page-form');

次のように、最初の呼び出しへの終了コールバックで発生する必要があります。

jQuery('.page-form').fadeOut('slow')
    .load(jQuery(this).attr('href') + ' .page-form', function() {
        jQuery('.page-form').fadeIn('slow')
            .load(jQuery(this).attr('href') + ' .page-form');
        });

その理由は、ほとんどのjQuery関数が非同期で機能するためです。コンテンツが読み込まれるまで呼び出しがブロックされると想定していましたが、そうではありません。呼び出しはすぐに返され、コンテンツはバックグラウンドで読み込まれます。これにより、表示されている奇妙な効果が発生します。divがフェードインおよびフェードアウトされ、2回ロードされます。すべて同時に行われます。

編集：ところで、なぜあなたload()は最初のものの後に正確に秒をしているのですか？これは私には少し奇妙に見えます-要素をフェードアウトさせてから、新しいコンテンツをロードしてから、もう一度フェードインさせたいと思いますか？

また、-fadeOut()と同様のコールバックを受け入れることに注意してください。load()したがって、読み込みを開始する前にフェードを終了させたい場合は、最初load()のコールバックをコールバック内に配置し、それを-callに渡しますfadeOut()。

于 2013-01-28T21:54:34.203 に答える