كيفية تشغيل نفس الوظيفة لمعرفات مختلفة بشكل منفصل

يمكنك دائمًا لفها في دالة واستخدامها على هذا النحو

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

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

بهذه الطريقة ستتمكن من استدعاء الرسوم المتحركة الخاصة بك مع أي نوع من المحددات بشكل متكرر وأسلوب قابل لإعادة الاستخدام.

أقترح قراءة بعض البرمجة الوظيفية.

يبدو أن الإجابات الأخرى لا تعترف بالجانب الانتظاري لسؤالك ، لذلك اكتشفت أنني سأتطرق لذلك. في مثل هذه الحالة ، يمكنك التكرار عبر العناصر وإرفاق الرسوم المتحركة لمدة ثانية واحدة لكل منها.

باستخدام الرمز أدناه ، كل setTimeout() سيتم إنشاء s في نفس الوقت ، ولكن سيكون الأول 0ms ، الثاني 1000ms ، الثالث 2000ms ، هكذا وهكذا دواليك.

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

تجريبي

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>

بعد النظر في نقاط الطريق ، يبدو أن مشكلتك تأتي من استخدام $stat الكائن داخل وظيفة رد الاتصال الخاصة بك:

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

عندما يتم الوصول إلى متطلبات إحدى نقاط الطريق ، فإنه سيتم استدعاء الرسوم المتحركة .css الخاصة بك على جميع العناصر التي $stat يحتوي على. ما تحتاجه هو جعلها أكثر ديناميكية واستخدامها this.element بدلا من $stat (أو ما شابه ذلك بناءً على إصدار نقاط الطريق التي تستخدمها).

var divId = "#bar-x";


function animate (var divId)
{

 var $stat = $(divId);

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

}