प्रोग्रामिंग, सवालों के जवाब में मदद करें / jQuery / jquery होवर मेनू फैडिन / छिपा ड्रॉपडाउन - jquery, ड्रॉप-डाउन-मेनू, मेनू, होवर, html-सूचियाँ

jquery होवर मेनू fadein / छुपा ड्रॉपडाउन - jquery, ड्रॉप-डाउन-मेनू, मेनू, होवर, एचटीएमएल-सूचियां

मेरे पास थोड़ा सा jquery है

    $(".dropdown").hide();

$("#mainnav ul li").hover(function(e){
$(this).children(".dropdown").fadeIn(250);
}, function(e) {
$(this).children(".dropdown").hide();
});

जब प्रत्येक माता-पिता LI के ऊपर मँडरा जाता है तो यह लुप्त हो जाता है और प्रत्येक मेनू को नीचे छिपा देता है।

मुझे यकीन नहीं है कि यह jquery काफी मजबूत है। कभी-कभी ड्रॉपडाउन डॉन "टी छिपाता है यदि माउस को मूल ली के पार ले जाया जाता है"।

क्या इस कोड की विश्वसनीयता में सुधार करने के लिए मैं कुछ भी कर सकता हूं?

धन्यवाद

उत्तर:

उत्तर № 1 के लिए 1

जैसा कि xFortyFourx का उल्लेख है, आप उपयोग कर सकते हैं .stop() कतार को साफ करने की विधि। जैसा कि jQuery प्रलेखन कहते हैं, स्टॉप मेथड केवल एनिमेशन के साथ काम करता है, इसलिए आप बेहतर उपयोग करते हैं .animate() के बजाय .fadeIn() तथा .fadeOut()

$("#mainnav ul li").hover(
function() {
$(this).children(".dropdown").stop().animate({opacity: 1});
},
function() {
$(this).children(".dropdown").stop().animate({opacity: 0});
}
);

का उपयोग करते हुए .stop() साथ में .fadeIn() अर्ध-पारदर्शी मोड पर ठंड तत्वों का कारण होगा। यहां देखें दोनों स्थितियों का लाइव पूर्वावलोकन: http://jsfiddle.net/stichoza/faqNt/

जवाब के लिए 0 № 2

शायद यह कोड आपकी मदद कर सकता है:

    $(".dropdown").hide();
$("#mainnav ul li").hover(function(){
$(this).children(".dropdown").stop().fadeIn(250);
}, function() {
$(this).children(".dropdown").stop().hide();
});

या

$("#mainnav ul li").hover(function(){
if($(this).children(".dropdown").css("display") == "none"){
$(this).children(".dropdown").fadeIn(250);
} else {
$(this).children(".dropdown").stop().hide();
}
});

सौभाग्य