قائمة القائمة المنسدلة jQuery باستخدام SlideUp و Slidedown on hover

Question

لقد صنعت قائمة منسدلة بسيطة للغاية باستخدام jQuery Slideup وانزلاق للوظائف - لكنها تصبح قفزًا جدًا (أنا أستخدم Firefox 3.6.8) إذا تم نقل الماوس بسرعة ، أو إذا تم الاحتفاظ بالماوس على واحدة من عناصر القائمة الفرعية.

لقد قدمت مثالًا يعمل في الرابط التالي:

http://jsfiddle.net/juraw/19/

بدون وظيفة. توقف (حقيقي ، حقيقي) ، فهي أسوأ. لقد حاولت أيضًا إضافة تحوم إلى حد ما ، ولكن لأن لدي عرض شرائح محروم في نفس Div تتعارض مع وظيفة عرض الشرائح.

هل هناك شيء أفتقده؟ لقد سمعت أن ClearQueue قد يعمل ، أو ربما مهلة ، لكن لا يمكنني معرفة مكان إضافتها.

شكرا لكم جميعا.

Answer 1

يمكنك البناء في تأخير طفيف ، على سبيل المثال 200ms لإكمال الرسوم المتحركة بحيث لا تكون قفزًا ، ولكن تركها .stop() لذلك لا يزال لن يتراكم ، مثل هذا:

$(function () {    
  $('#nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));
  });
});

يمكنك تجربتها هنا, ، يستخدم هذا النهج $.data() لتخزين المهلة لكل عنصر لذا ، يتم التعامل مع كل قائمة بشكل مستقل ، إذا كان لديك العديد من عناصر القائمة ، فيجب أن يعطي هذا تأثيرًا رائعًا.

Answer 2

يضيف هذا التأخير البسيط على المفتوحة - لذا فإن الركض بسرعة لن يخرج القائمة.

$(function () {    
  $('#nav li').hover(function () {
    $('ul', this).stop(true, true).delay(200).slideDown(200);
  }, function () {
    $('ul', this).stop(true, true).slideUp(200);
  });
});