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

2

أحاول تحريك أشرطة تقدم / تحميل متعددة. يعمل الرمز أدناه بالطريقة التي أريدها ، ويمكنني فقط نسخ ولصق ثم استبدال اسم المعرف ولكن هذا يبدو طويلًا دون داعٍ. ما هي الطريقة الفعالة لاستخدام رمز jquery الخاص بي مع أنواع مختلفة من المعرّفات (مثل: # bar-x و # bar-y و # bar-z)؟ لقد حاولت الفصل بفواصل مثل أدناه

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

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

ولكن بعد ذلك يتم تشغيل جميع الرسوم المتحركة في نفس الوقت عندما يصل الكائن الأول إلى المتطلبات بدلاً من عندما يصل كل كائن فردي إلى المتطلبات المذكورة.

4 الاجابة

2
افضل جواب

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

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

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

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

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

:مؤلف
1
افضل جواب

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

باستخدام الرمز أدناه ، كل 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>

:مؤلف
1
افضل جواب

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

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

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

:مؤلف
-2
افضل جواب
var divId = "#bar-x";


function animate (var divId)
{

 var $stat = $(divId);

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

}
:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام