不錯的jquery加載效果

Question

我想加載一個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)); 
      }); 
} 

Answer 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) 
        }); 
    }); 
} 

Answer 2

我想你的代碼，它似乎按照你的意圖工作。我必須將褪色時間從300ms增加到2000ms，以便更好地觀察褪色。

你將遇到的一個問題是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>