Fondu dans chaque élément - l'un après l'autre

Question

J'essaie de trouver un moyen de charger une page JSON pour afficher mon contenu, que j'ai actuellement. Mais j'essaie de fondre dans chaque élément l'un après l'autre? Quelqu'un connaît-il un moyen de le faire?

Fondu dans chaque élément avec un léger retard?

Voici un exemple de mon code, j'utilise le framework jquery.

CODE: http://pastie.org/343896

Answer 1

Eh bien, vous pouvez configurer vos fonctions de fondu pour déclencher le "prochain".

$("div#foo").fadeIn("fast",function(){ 
     $("div#bar").fadeIn("fast", function(){ 
      // etc. 
     }); 
    }); 

Mais une minuterie peut être un meilleur système, ou une fonction qui les reçoit tous, ce qui les met dans un tableau, puis apparaît une à la fois avec un retard entre les deux, les décolorant dans un à temps.

Answer 2

Découvrez jQuery fadeIn() avec un setTimeout() (fonction standard JS). Vous pouvez commander quelque chose que j'ai fait sur ce site http://www.realstorage.ca/. Je les cache et les montre pour pouvoir faire une boucle.

Answer 3

Je pense que vous aurez besoin de quelque chose comme ceci:

var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery(); 
fadeInNextElement(elementArray); 


function fadeInNextElement(elementArray) 
{ 
    if (elementArray.length > 0) 
    { 
     var element = elementArray.pop(); 
     $(element).fadeIn('normal', function() 
     { 
      fadeInNextElement(elementArray); 
     } 
    } 
} 

Attention: Je ne l'ai pas testé, mais même si cela ne fonctionne pas, vous devriez avoir l'idée et le fixer facilement. Par ailleurs, je ne suis pas d'accord avec l'utilisation d'une minuterie. Avec une minuterie, rien ne garantit que les éléments se fanent les uns après les autres, et l'évanouissement d'un élément ne commencera que si le précédent est terminé. Théoriquement, cela devrait fonctionner, mais il peut arriver que votre «chaîne» doive s'arrêter pour une raison quelconque, ou que l'animation qui s'estompe ne puisse pas finir à l'heure, etc. Utilisez simplement un chaînage approprié.

Answer 4

Disons que vous avez un ensemble d'éléments de portée:

$("span").each(function(index) { 
    $(this).delay(400*index).fadeIn(300); 
}); 

(note rapide: Je pense que vous avez besoin jQuery 1.4 ou plus pour utiliser la méthode .delay)

Cela en fait attendre une durée fixe et un fondu de chaque élément. Cela fonctionne parce que vous multipliez le temps d'attente par l'index de l'élément. Les retards ressemblerait à quelque chose comme ça quand itérer à travers le réseau:

• Retard 400 * 0 (pas de retard, juste fadeIn, qui est ce que nous voulons pour le premier élément)
• Retard 400 * 1
• Retard 400 * 2
• retard 400 * 3

Cela fait une belle "l'un après l'autre" effet fadeIn. Il pourrait également être utilisé avec slideDown. J'espère que cela t'aides!

Answer 5

Que pensez-vous de cela?

jQuery.fn.fadeDelay = function() { 
delay = 0; 
return this.each(function() { 
    $(this).delay(delay).fadeIn(350); 
    delay += 50; 
}); 
};