web-dev-qa-db-fra.com

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

J'essaie de trouver un moyen de charger une page JSON pour afficher mon contenu, que j'ai actuellement. Mais j'essaye de fondre 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

jqueryajaxload
46
Coughlin

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

 $("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 obtient tous, les met dans un tableau, puis les fait disparaître un à la fois avec un retard entre les deux, en les atténuant l'un après l'autre.

18
Genericrich

Disons que vous disposez d'un tableau d'éléments span:

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

(note rapide: je pense que vous avez besoin de jQuery 1.4 ou supérieur pour utiliser la méthode .delay)

Cela attendrait un certain temps et fondu chaque élément. Cela fonctionne parce que vous multipliez le temps d'attente par l'index de l'élément. Les retards ressembleraient à ceci lors de l'itération à travers le tableau:

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

Cela crée un bel effet de fondu "l'un après l'autre". Il pourrait également être utilisé avec slideDown. J'espère que cela t'aides!

250
Aaron

Que dis-tu de ça?

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

Je pense que vous aurez besoin de quelque chose comme ça:

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 réparer facilement.

Soit dit en passant, je ne suis pas d'accord avec l'utilisation d'une minuterie. Avec une minuterie, rien ne garantit que les éléments s'affichent les uns après les autres, et l'affaiblissement d'un élément ne démarre que si le précédent est terminé.

Théoriquement, cela devrait fonctionner, mais il peut y avoir des cas où votre "chaîne" doit s'arrêter pour une raison quelconque, ou l'animation de fondu ne peut pas se terminer à l'heure, etc. Utilisez simplement un chaînage approprié.

4
Tamas Czinege

Découvrez jQuery fadeIn () avec setTimeout () (fonction JS standard). Vous pouvez vérifier quelque chose que j'ai fait sur ce site http://www.realstorage.ca/ . Je les cache et les montre pour que ça puisse aller en boucle.

1
Darryl Hein

D'après les réponses ci-dessus, j'ai trouvé quelque chose comme ça qui a bien fonctionné pour moi.

HTML 

<div id="errorMessage" class="d-none" ></div>

Javascript

var vehicle = {

error: (error, message) => {
    if(error){
        vehicle.popUp(message, 'bg-danger');
    }else{
        vehicle.popUp(message, 'bg-success');
    }
},
popUp: (array, bgColor) => {

    var errorBox = $('#errorMessage');

    errorBox.removeClass('d-none');
    $.each(array, function(i,e){
        i=i+1;
        var messageBox = '<div id="'+i+'" class="'+bgColor+' text-white">'+e+'</div>';
        $(messageBox).appendTo(errorBox).delay(100*i+0).slideDown(100*i+0,function(){
            $('#'+i).delay(1000*i+0).slideUp(400*i+0, function(){
                $('#'+i).remove();    
            });
        });
    });               
},

}
0
Kyle Coots