nice jquery load effect

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

Я попробовал ваш код, и он работает так, как вы предполагали. Мне нужно было увеличить время затухания с 300 мс до 2000 мс, чтобы лучше видеть fadein.

Единственная проблема, с которой вы столкнетесь, - 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); 
     }); 
    }); 
} 

Вам нужно будет добавить контейнер div вокруг #showdata.

<div> 
    <div id="#showdata">TEST</div> 
</div>