bel effet de charge jquery

Question

Je voudrais charger une page à l'intérieur d'une div avec des effets de fadeTo. J'ai créé cette fonction pour que

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

Le fondu du contenu actuel à l'image est ok, mais après cela, le nouveau contenu pop tout d'un coup.

J'ai aussi essayé, mais même résultat:

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

Vous devez envelopper votre code pour le rappel .load() comme une fonction anonyme comme ceci:

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

J'ai essayé votre code, et Cela semble fonctionner comme vous le vouliez. J'ai dû augmenter le temps de fondu de 300ms à 2000ms pour mieux voir le fadein.

Le seul problème que vous aurez est le chargement.gif ne s'affiche pas. C'est parce que vous fanent cet élément, de sorte que vous n'allez voir quoi que ce soit là :)

---

edit: vous pouvez faire quelque chose comme ça à la place.

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

Vous devez ajouter un conteneur div autour #showdata.

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