باستخدام مسج لعرض الكلمات على التوالي

Question

ولدي صفحة التي تحتوي 2 الأعمدة من الكلمات، ما مجموعه 20، التي هي من فئة معينة (قاتمة) وكل معرف فريد. هذا الصنف يعرف "قاتمة" الكلمات المخفية. لدي ما يلي مسج كود تشغيل عند الضغط على زر:

$().ready(function() 
  {
  var x = 20; // will be dynamic later :-)
    $("#btn1").click(function() 
      {
        for(i=1 ; i <= x ; i++)
          {
          //alert(i);
          $(".dim").removeClass("hilite"); 
            // this 'turns off' all the words
          $("#wrd-"+i).addClass("hilite"); 
            // this turns on the i'th word
          }
      });
  });

عند I uncomment السطر في حالة تأهب أنا قادرة أن نرى أن كل كلمة تصبح مرئية ثم يخفي مرة أخرى، مثلما أنه من المفترض أن. المشكلة الوحيدة هي أنه يحدث بسرعة كبيرة. أريد طريقة لجعل كل حلقة الانتظار لعدد معين من نانو ثانية. لقد حاولت أسلوب setTimeout لكنني لا استطيع الحصول عليه لفعل أي شيء. أي فكرة عن كيفية إبطاء هذا إلى أسفل؟ لقد حاولت استخدام. تظهر و.hide ولكن يبدو أن جميع الآثار أن يحدث في وقت واحد.

وهدفي هو أن تكون الكلمة الأولى في العمود 1 عرض لمدة 2 ثانية. ثم يذهب بعيدا وكلمة 1 في العمود 2 يعرض لمدة 2 ثانية. ثم كلمة 2 عمود 1، ثم كلمة 2 العمود 2 وهلم جرا.

والشكر

Answer 1

ويجب أن لا تحتاج معرفات مثل #wrd3 للدخول إلى قائمة العناصر.

وأنا لم مصممة اختيار DOM بالنسبة لك، ولكن هذا الرمز إظهار وإخفاء كل عنصر في مجموعة، مع وقفة بين. الفاصل الزمني في .fadeIn يعني هذا البند سيتم عرض لأن حوالي من الوقت قبل أن تبدأ وظيفة .fadeOut().

var things = $('.foo');
var index = 0;
things.hide();
var showHide = function() {
  things.eq(index).fadeIn(2000,function(){
    $(this).fadeOut(2000);
  });
  index++;
  setTimeout(showHide,3000);
};

showHide();

وبطبيعة الحال، يمكنك تغيير يتلاشى ل.show() و.hide()، أو أيا كان الرسوم المتحركة الأخرى التي تريد.