حل مشكلة الـ hover بالـ jquery وعدم تكرارها، بكود بسيط

SoF!@N

عضو جديد
10 أغسطس 2009
167
0
0
أقدم لكم اليوم درس رائع جدا جدا، وخفيف جدا جدا جدا، ومفيد جدا جدا جدا

الآن نطرح عليكم المشكلة: وهي عند استخدام الحدث hover في الجي كويري، لشيء معين (مثلا لانسدال القائمة الفرعية) الآن عند مرور الماوس لأكثر من مرة متتالية بسرعة ومن ثم نرفع الماوس على العنصر الأب li كي تظهر قائمة فرعية بأي حركة، نلاحظ أن القائمة الفرعية تظهر وتختفي على عدد مرات تمرير الماوس.


الآن سيكون الشرح أيضا على قائمة فرعية تمام كموقع ترايدنت، بشكل عادي وطبيعي سنقوم بعمل قائمة رئيسية وتتفرع منها قائمة فرعية، ونقوم بتنسيقها بالشكل الذي يحلو لنا.

الآن بالنسبة للقائمة الفرعية، نريد أن نظهرها من خلال حركة عن طريق jquery وهي حركة slideDown ، الكود التالي يقوم بعمل ذلك.


كود:
// لإظهار القائمة الفرعية قبل حل المشكلة
    $('ul#menu > li.unfix').hover(function(){
        $(this).find('>ul').slideDown();
    },function(){
        $(this).find('>ul').slideUp();
    });
بهذه الطريقة تظهر القائمة الفرعية، ولكن مع وجود المشكلة كما هي.

أما الآن سنقوم بكتابة الكود ولكن مع حل المشكلة، كما بالكود التالي:


كود:
// لإظهار القائمة الفرعية الأولى بعد حل المشكلة
    $('ul#menu > li.fix').hover(function(){
        $(this).find('>ul').stop(true, true).slideDown();
    },function(){
        $(this).find('>ul').stop(true, true).slideUp();
    });
ماذا الفرق بين الكود الأول والكود الثاني.

في الأول وهي الصيغة الطبيعية لكتابة الكود، ولكن مع وجود المشكلة المذكورة.

أما في الكود الثاني قمنا بحل المشكلة بوضع كود بسيط وهو :

كود:
.stop(true, true)
تم وضعها قبل الحركة المستخدمة وهي slideDown
كما يمكننا أن نستخدمها مع أي حركة في حالة الحدث الـ hover، كي نحصل على طريقة أفضل في أداء الحركة.

الصورة التالية توضح كتابة الكود والفرق بينه.


attachment.php


لمعيانة العمل بالكامل، وملاحظة الفرق بين المشكلة وحلها، يمكنكم من خلال الرابط التالي:

قائمة بتقنية css + قائمة منسدلة + jquery - jsFiddle


المشكلة موجودة في العنصر li باسم "أقسام الموقع"، بينما حل المشكلة موجود في العنصر li باسم "دروس تعليمية" والفرعي منه باسم "دروس لغات البرمجة".
💘