1

想定どおりに機能するコードの一部があります。

function showContent(pos,direction){
$("#area").hide("slide", { direction: direction=="left"?"right":"left"}, 2000);
$("#area").load("flow_forms.jsp #area" + pos);
$("#area").show("slide", { direction: direction }, 500);
}

$('#next').click(function(){
    if(question_pos==0){
        question_pos+=1;
        showContent(question_pos,"right");
        return true;

エリアは左にスライドし、画面外にロードしてから、ロードされたエリアの内容を右からスライドインすることになっています。

基本的に私が抱えている問題は、.hideの前に.loadが発生していることです。つまり、私が持っているのは、左にスライドするときにロードされ、すでにロードされている領域を右から取り込む領域です。上司がコールバック関数を提案しましたが、それが何であるかさえわかりません...

4

2 に答える 2

1

.load完了コールバックを使用するか、要素のアニメーションキューで「約束」を取得することにより、最初のアニメーションが完了するまで待機させることができます。

$("#area").hide(...).promise().done(function() {
    $("#area").load(..., function() {
        $(this).show(...);
    });
});

ただし、実際にはより良いオプションがあります。これにより、アニメーションの進行中に開始できるようになります。これにより、応答性が向上します。.load

var $tmp = $('div');

var loaded = $.Deferred(function() {
    $tmp.load(...);  // load into an off-screen div
    this.resolve();
});

var hidden = $('#area').hide(...).promise();

$.when(loaded, hidden).done(function() {
    // move #tmp contents to #area and show it
    $('#area').empty().append($tmp).show();
});

には$.when()、AJAXのロードとアニメーションの両方が完了している必要がありますが、両方を同時に進行させることができます。

于 2013-03-11T17:37:09.460 に答える
0

コールバック関数を使用する必要があります。これらは、次のように、現在の関数の実行が終了すると実行されます。

function showContent(pos,direction){
    $("#area").hide("slide", { direction: direction=="left"?"right":"left"}, 2000,      
        function(){
            $("#area").load("flow_forms.jsp #area" + pos, function(){
                $("#area").show("slide", { direction: direction }, 500);
            }); // Load callback 
        } // Hide callback            
    );
}
于 2013-03-11T17:37:17.430 に答える