0

サーバーページからdivにデータをロードする次のjavascript関数がありますこれはFadeIn/FadeOutエフェクトで正常に動作しています

function ShowModels(manuId) {

     var div = $("#rightcol");  


    div.fadeOut('slow',function() {          
        div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                         { symbol: $("#txtSymbol" ).val() },
                           function() {
                           $(this).fadeIn();                             

                       });

    });

}

divがサーバーページからコンテンツをロードするまで、ロードメッセージを表示したい

私はこれを試しましたが、機能していません。誰かがこれをデバッグするのを手伝ってくれますか？前もって感謝します

function ShowModels(manuId) {

     var div = $("#rightcol"); 
     var strLoadingMsg="<img src='loading.gif'/><h3>Loading...</h3>";
    div.fadeOut('slow',function() {
        div.load(strLoadingMsg,function(){

             div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                         { symbol: $("#txtSymbol" ).val() },
                           function() {
                           $(this).fadeIn();


                       });
         });
    });

}

私の最終的な要件は、現在のコンテンツをFadeOutすることです。Loadingメッセージを表示します。FadeIn効果でサーバーからのデータを表示します。

4

3 に答える 3

2

私はこれをテストしましたが、それはあなたが望むことをするはずです。関数は次のとおりです。

function ShowModels(manuId){
     var div = $("#rightcol"); 
     var strLoadingMsg="<img src='loading.gif'/><h3>Loading...</h3>"; 


     div.fadeOut('slow',function() {  
     div.html(strLoadingMsg).show();       
         div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                     { symbol: $("#txtSymbol" ).val() },
                       function() {

                       $(this).hide().fadeIn();                             

                   });

     });

}

実際の動作を見たい場合は、http: //thetimbanks.com/demos/help/jqueryproblem-in-chaining-the-events/にアクセスして、ソースを表示し、好きなように使用してください。

私の例では、test.php を使用して投稿しましたが、それでもページで機能するはずです。

于 2009-06-10T21:56:38.540 に答える
1

ショットを試してみます。ロードプロセスを制御できるようにするには、明示的なAJAX呼び出しを使用して、次のようなことを行う方がはるかに優れています。

 var div = $("#rightcol");  


div.fadeOut('slow',function() { 
    var loading = $("<img src='loading.gif'/><h3>Loading...</h3>");
    $(this).replaceWith( loading);      
    $.post("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                     { symbol: $("#txtSymbol" ).val() },
                       function(data) {
                       var newDiv = $( "<div id=rightcol></div>").html( data).hide();
                       loading.replaceWith( newDiv);
                       newDiv.fadeIn();                             
                   });

});
于 2009-06-06T11:44:31.857 に答える
1

私はこれをテストしていませんが、gif アニメーションを表示/非表示にしないのはなぜですか? 読み込み前に FadIn、読み込み後、ただしコンテンツを表示する前に、fadeOut。

var div = $("#rightcol");  


div.fadeOut('slow',function() {
    $('.loadAnimation').fadeIn(100);
    div.load("../Lib/handlers/ModelLookup.aspx?mode=bymanu&mid="+manuId,
                     { symbol: $("#txtSymbol" ).val() },
                       function() {
                       $('.loadAnimation').fadeOut(100);
                       $(this).fadeIn();                             

                   });

});

編集： それがあなたの質問だったので、そのGIFアニメーションをテキストに置き換えてください;）

于 2009-06-06T10:53:28.090 に答える