Jquery: माउसलेव में देरी कैसे जोड़ें ताकि अगर कोई गलती से तत्व को अनजाने में बंद कर देता है, तो यह अभी भी

Question

खुला रहता है। होवरिंटेंट प्लगइन जो मुझे चाहिए उसके विपरीत है। मेरे पास एक .popup है जो .trigger द्वारा ट्रिगर किया जाता है, जब मैं इसे बंद कर देता हूं, तो मैं कुछ सेकंड के लिए fopout नहीं चाहता हूं, लेकिन अगर मैं होवर करता हूं, तो फिर से होवर करें, उस फीडआउट को रद्द करें जो जा रहा था हो और .popup खुला रखें।

क्या कोई जानता है कि मैं यह कैसे करूं?

यह काम नहीं करता है, लेकिन यह एक विचार था:

$('.trigger').hover(function(){ 
     $('.popup').fadeIn(600) 
    }, function() { 
     $('.popup').delay(2000, function(){ 
      if ($(this).blur() = true) { 
       $('.popup').fadeOut(600) 
      } 
     }); 
    }) 

Answer 1

jQuery HoverIntent plugin बिल्कुल वही है जो आप ढूंढ रहे हैं।

टाइमआउट संपत्ति आउट फ़ंक्शन कहने से पहले माउस के क्षेत्र को बाहर करने की आवश्यकता निर्धारित करती है। मंडराना आशय वेबसाइट से

उद्धरण:

समय समाप्त: एक साधारण देरी, मिलीसेकेंड में, इससे पहले कि "बाहर" समारोह कहा जाता है। यदि उपयोगकर्ता टाइमआउट की समयसीमा समाप्त होने से पहले तत्व पर वापस आ जाता है तो "आउट" फ़ंक्शन नहीं कहा जाएगा (न ही "ओवर" फ़ंक्शन को बुलाया जाएगा)। यह मुख्य रूप से मैला/मानव आवास प्रक्षेपणों के खिलाफ सुरक्षा के लिए है जो अस्थायी रूप से (और अनजाने में) उपयोगकर्ता को लक्ष्य तत्व से दूर ले जाता है ... उन्हें वापस लौटने का समय देता है। डिफ़ॉल्ट टाइमआउट: 0

यह सेट करने के लिए ...

$('.trigger').hoverIntent({ 
    over: startHover, 
    out: endHover, 
    timeout: 2000 
}); 

फिर संभाल करने over और out

function startHover(e){ 
    //your logic here 
    $('.popup').fadeIn(600) 
} 

function endHover(){ 
    //your logic here 
    $('.popup').fadeOut(600) 
} 

संपादित कार्यों को परिभाषित:

तुम भी समायोजित कर सकते हैं interval स्टार्टहोवर func के लिए समय की मात्रा बढ़ाने/घटाने के लिए संपत्ति टयन टू फायर ... डिफ़ॉल्ट 100 मिलीसेकंड पर सेट है ... यदि आप चाहें तो माउस ट्रिगर क्षेत्र में प्रवेश करते ही पॉपअप को बंद करने के लिए शून्य पर सेट कर सकते हैं।

Answer 2

आप jQuery hoverIntent प्लगइन का उपयोग कर की कोशिश कर सकते।

Answer 3

यह मेरे लिए काम करता है:

$(".triger").mouseenter(function() { 
    $(this).find("popup").fadeIn(); 
}).mouseleave(function() { 
    $(this).find("popup").delay(200).fadeOut(); 
}); 

Answer 4

यहाँ यह करने के लिए सबसे आसान तरीका है, अतिरिक्त प्लगइन के बिना:

$('.trigger').hover(function() { 
    clearTimeout(this.timer); 
    $('.popup').fadeIn(600); 
}, function() { 
    this.timer = setTimeout(function() { 
     if ($(this).blur() = true) { // off topic: you should to check this condition ;) 
      $('.popup').fadeOut(600); 
     } 
    }, 2000); 
}); 

setTimeout() और clearTimeout() हैं एचटीएमएल डोम खिड़की के देशी जे एस कार्यों हमेशा के लिए वस्तु।