2009-11-24 7 views
0

J'essaie de charger des éléments aléatoires dans un div toutes les quelques secondes, avec une belle transition fadeOut/fadeIn entre chaque charge. Voici le code:Pourquoi jQuery fadeOut ne fonctionne-t-il pas dans cette boucle setInterval?

<html> 
    <body> 
    <div id="item"></div> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     // Load a random item 
     var item = $('#item'); 
     function load_item() { 
     item.fadeOut(5000, function() { 
      item.load('http://dynamic.xkcd.com/comic/random/ #middleContent img', null, function() { 
      item.fadeIn(5000); 
      }); 
     }); 
     }; 

     // Load initial featured item 
     load_item(); 

     // Schedule repeated loading 
     setInterval(load_item, 15000); 
    </script> 
    </body> 
</html> 

Cela fonctionne bien la première fois à travers, mais les appels suivants à load_item, le fadeOut() semble cesser de fonctionner. Il ne fait pas disparaître le #item div out, mais saute immédiatement dans la fonction de rappel, en ignorant le délai 5000.

Qu'est-ce que je fais mal?

+0

Il semble fonctionner très bien pour moi, je l'ai essayé sur Firefox 3.5 – JasonWyatt

+0

Peut-être quand load_item() est appelée deuxième fois fadeout appelle immédiatement la fonction de rappel parce que #item est déjà caché, donc fadeOut ne fait pas l'animation de 5000 ms? – Roman

+0

C'est ce que je pensais, mais le #item div est visible (je peux le voir), donc je ne sais pas pourquoi fadeOut() pense qu'il est caché. – claymation

Répondre

0
setInterval("load_item()",15000) 

Je sais que cela semble amusant de le mettre entre guillemets, mais cela fonctionne.

L'autre option est de dire:

load_item = function(){...etc...}; 
setInterval(loadItem,1500) 
+0

Ce n'est certainement pas la bonne syntaxe. Vous devriez éviter eval. Le passage d'une référence de fonction comme le fait Clay est le moyen préféré. – Magnar