Comment exécuter la même fonction pour différents identifiants séparément ?

Question

J'essaie d'animer plusieurs barres de progression/chargement. Le code ci-dessous fonctionne comme je le souhaite et je pourrais simplement copier et coller puis remplacer le nom de l'ID mais cela semble inutilement long. Quel est le moyen le plus efficace d'utiliser mon code jquery avec différents types d'ID (ex : #bar-x, #bar-y, #bar-z) ? J'ai essayé de les séparer par des virgules comme ci-dessous

$(function() {
  var $stat = $('#bar-x, #bar-y, #bar-z');

  $stat.waypoint(function() {
    $stat.css({
    animation: "loading 1s linear",
    opacity: "1"
    });
  }, { offset: '95%' });
});

mais il exécute alors toutes les animations en même temps lorsque le premier objet atteint l'exigence au lieu de le faire lorsque chaque objet atteint l'exigence en question.

Answer 1

Vous pouvez toujours l'intégrer dans une fonction et l'utiliser comme suit

function myAnimation(selector){
  selector.waypoint(function() {
    selector.css({
      animation: "loading 1s linear",
      opacity: "1"
    });
  }, { offset: '95%' });
}

myAnimation($('#bar-y'));

De cette façon, vous pourrez faire appel à votre animation avec n'importe quel type de sélecteur de façon répétée et réutilisable.

Je vous suggère de vous familiariser avec la programmation fonctionnelle.

Answer 2

Il semble que les autres réponses ne tiennent pas compte de l'aspect "file d'attente" de votre question, alors je me suis dit que j'allais aborder ce point. Dans ce cas, vous pourriez parcourir les éléments en boucle et attacher l'animation à une seconde d'intervalle à chacun d'entre eux.

En utilisant le code ci-dessous, tous les setTimeout() seront instanciées en même temps, mais la première le sera pour les 0ms , le second 1000ms , le troisième 2000ms et ainsi de suite.

var $stat = $('.bar');  //add class "bar" to each item you want to be included
var msDelay = 1000;

$stat.each(function(index) {
  setTimeout(() => loadNext($(this)), msDelay * index);
});

function loadNext($elem) {
  $elem.waypoint(function() {
    $elem.css({
      animation: "loading 1s linear",
      opacity: "1"
    });
  }, {
    offset: '95%'
  });
};

Démonstration

var $stat = $('.bar');
var msDelay = 1000;

$stat.each(function(index) {
  setTimeout(() => loadNext($(this)), msDelay * index);
});

function loadNext($elem) {
  $elem.css({ opacity: "1" });
};

.bar {
  opacity: 0;
  padding: 20px;
  margin: 5px;
  background-color: red;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>

Answer 3

Après avoir examiné les points de cheminement, il semble que le problème vienne de l'utilisation de la fonction $stat dans votre fonction de rappel :

...
    $stat.css({
    animation: "loading 1s linear",
    opacity: "1"
    });
...

Lorsque l'exigence pour l'un des points de passage est atteinte, il appellera votre animation .css sur TOUS les éléments qui ont été modifiés. $stat contient. Ce dont vous avez besoin, c'est de le rendre un peu plus dynamique et d'utiliser this.element à la place de $stat (ou similaire, selon la version de Waypoints que vous utilisez).

Answer 4

var divId = "#bar-x";

function animate (var divId)
{

 var $stat = $(divId);

  $stat.waypoint(function() {
    $stat.css({
    animation: "loading 1s linear",
    opacity: "1"
    });
  }, { offset: '95%' });

}