0

div内にfadeTo効果のあるページをロードしたいと思います。そのためにこの関数を作成しました

function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
                $("#showdata")
                .html('<img src="images/loading.gif" />')
                .load('includes/show/'+div+'.inc.php')
                .fadeTo(300,1.0);;
            }); 
}

現在のコンテンツから画像へのフェードは問題ありませんが、その後、新しいコンテンツが突然ポップします。

私もこれを試しましたが、同じ結果です：

function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
                $("#showdata")
                .html('<img src="images/loading.gif" />')
                .load('includes/show/'+div+'.inc.php',$("#showdata").fadeTo(300,1.0));
            }); 
}
4

2 に答える 2

1

.load()次のように、コールバックのコードを無名関数としてラップする必要があります。

function show(div) {
  $("#showdata").fadeTo(300,0.0,function() {
    $("#showdata").html('<img src="images/loading.gif" />')
                  .load('includes/show/'+div+'.inc.php', function() {
                     $(this).fadeTo(300,1.0)
                  });
  }); 
}
于 2010-08-19T15:32:14.157 に答える
0

あなたのコードを試してみましたが、意図したとおりに動作するようです。フェードインをよく見るために、フェード時間を 300ms から 2000ms に増やす必要がありました。

1 つの問題は、loading.gif が表示されないことです。これは、その要素をフェードアウトするためです。そのため、そこには何も表示されません:)

編集：代わりにこのようなことができます。

function show(div){
    $("#showdata").fadeTo(2000,0.0,function() {
        $("#showdata")
        .parent().append('<img src="loading.gif" />') //add the image to the container, so you can see it still
        .end().load('includes/show/'+div+'.inc.php', function(){
            $("#showdata")
            .parent().find('img').remove() //remove the image once the page is loaded. 
            .end().end().fadeTo(2000,1.0);
        });
    }); 
}

#showdata の周りにコンテナ div を追加する必要があります。

<div>
   <div id="#showdata">TEST</div>
</div>
于 2010-08-19T16:50:28.560 に答える