تتلاشى في كل عنصر - واحدًا تلو الآخر

Question

أحاول إيجاد طريقة لتحميل صفحة JSON لعرض المحتوى الخاص بي، والذي أملكه حاليًا.لكني أحاول أن أتلاشى في كل عنصر واحدا تلو الآخر؟هل هناك من يعرف طريقة للقيام بذلك؟

تتلاشى في كل عنصر مع تأخير طفيف؟

فيما يلي مثال على الكود الخاص بي، وأنا أستخدم إطار عمل jquery.

شفرة: http://pastie.org/343896

Answer 1

حسنا، هل يمكن أن الإعداد وظائف تتلاشى لتحريك "بجوار" واحد.

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

ولكن توقيت قد يكون نظام أفضل، أو الوظيفة التي يحصل عليها كل شيء، يضعهم في صفيف، ثم دفعها لهم مرة واحدة في وقت واحد مع تأخير في بين، ويتلاشى لهم في واحدة في وقت واحد.

Answer 2

لنفترض أن لديك مجموعة من عناصر الامتداد:

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

(ملاحظة سريعة:أعتقد أنك بحاجة إلى jQuery 1.4 أو أعلى لاستخدام طريقة .delay)

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

• تأخير 400 * 0 (بدون تأخير، فقط FadeIn، وهو ما نريده للعنصر الأول)
• تأخير 400*1
• تأخير 400*2
• تأخير 400*3

وهذا يجعل تأثير التلاشي جميلًا "واحدًا تلو الآخر".ويمكن استخدامه أيضًا مع SlideDown.أتمنى أن يساعدك هذا!

Answer 3

وماذا عن هذا؟

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

Answer 4

وأعتقد أنك سوف تحتاج إلى شيء من هذا القبيل:

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


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

والحذر: أنا لم نجرب ذلك، ولكن حتى لو كان لا يعمل، يجب أن تحصل على هذه الفكرة وإصلاحه بسهولة

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

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

Answer 5

تحقق من مسج fadeIn () مع setTimeout () (وظيفة JS القياسية ). يمكنك الخروج شيء فعلته على هذا الموقع http://www.realstorage.ca/ . أنا في الأساس إخفاء وتبين لهم لذلك يمكن أن تذهب في حلقة.