كيف أتلاشى 1 Div وأتلاشى في اثنين من divs ، ثم بعد 10 ثوان من عدم النشاط ، وتتلاشى في الدرجة الأولى مرة أخرى ، وتلاشى 2 divs؟

Question

هذا هو رمز بلدي حاليا:

$(function() {          
        $('#header_left').click(function(){
            $('#header_left_info').fadeOut('fast');
            $('#header_left').fadeOut('fast');
            $('#header_left_back').delay(250).fadeIn('fast');
        });
});

(تأخير 250 ميلي ثانية حتى لا يتعارض التلاشي)

على أي حال ، أود تعديل هذا الكود الحالي بحيث يتلاشى #Header_LEFT_BACK ، و #Header_LEFT مرة أخرى - ولكن فقط بعد 10 ثوان من عدم النشاط من قبل المستخدم. يجب أن يكون هذا بسيطًا ، ولكن بالنسبة لمصمم ويب بدون تجربة jQuery السابقة - إنه أمر صعب حقًا. Betcha أنت المبرمجون يمكنهم معرفة ذلك في غضون 20 ثانية!

شكرًا لك!

تم الرد على هذا السؤال. شكرًا!

Answer 1

أعتقد أنك بعد شيء مثل هذا:

$(function() {          
  $('#header_left').click(function(){
    $('#header_left_info, #header_left').fadeOut('fast');
    $('#header_left_back').delay(250).fadeIn('fast');
  });

  var timer;
  $(document).bind("keypress mousemove", function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
              $('#header_left_back').fadeOut('fast', function() {
                $('#header_left').fadeIn('fast');
              });
            }, 10000);
  });
});

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

Answer 2

قام بول الأيرلندي بإنشاء أ idletimer البرنامج المساعد ل jQuery. إنه مفيد جدا.