कैसे .hover() प्रतीक्षा करने के लिए कहें?

Question

मेरे पास एक ड्रॉप डाउन मेनू है। अब जब यह कई स्तरों पर फिसल जाता है, तो मैं इसे गायब होने से पहले 2 सेकेंड के लिए प्रतीक्षा समय जोड़ना चाहता हूं, इसलिए उपयोगकर्ता .hover() को गलती से तोड़ने पर वापस आ सकता है।

क्या यह संभव है?

स्लाइड के लिए मेरे कोड: जब उपयोगकर्ता वापस घूमता

$('.icon').hover(function() { 
    clearTimeout($(this).data('timeout')); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    var t = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
    $(this).data('timeout', t); 
}); 

यह भी टाइमआउट को साफ करता है:

$('.icon').hover(function() { 
     $('li.icon > ul').slideDown('fast'); 
    }, function() { 
     $('li.icon > ul').slideUp('fast'); 
    }); 

Answer 1

यह कर देगा दूसरा समारोह निष्पादित करने से पहले 2 सेकंड (2000 मिलीसेकंड) इंतजार पागल व्यवहार से बचने के लिए।

हालांकि यह ऐसा करने का एक बहुत ही शानदार तरीका नहीं है। आपको शायद hoverIntent प्लगइन देखें, जो इस विशेष समस्या को हल करने के लिए डिज़ाइन किया गया है।

Answer 2

सामान्य विचार तो जैसे setTimeout उपयोग करने के लिए, यह है:

$('.icon').hover(function() { 
      $('li.icon > ul').slideDown('fast'); 
    }, function() { 
      setTimeout(function() { 
       $('li.icon > ul').slideUp('fast'); 
      }, 2000); 
    }); 

लेकिन अगर उपयोगकर्ता बाहर माउस रखेगा और उसके बाद फिर में माउस रखेगा जल्दी-इस समय समाप्ति जब समाशोधन के लिए खाते में नहीं है यह counterintuitive बातें कर सकते हैं उपयोगकर्ता फिर से इस पर होवर करता है। इसके लिए अतिरिक्त राज्य की आवश्यकता होगी।

http://cherne.net/brian/resources/jquery.hoverIntent.html

पेज से

: hoverIntent एक प्लगइन है कि ... उपयोगकर्ता का ऐसा उद्देश्य निर्धारित करने का प्रयास एक क्रिस्टल बॉल की तरह, सिर्फ माउस के साथ है

Answer 3

व्यक्तिगत रूप से मैं "hoverIntent" प्लगइन की तरह आंदोलन! यह jQuery के अंतर्निर्मित होवर की तरह काम करता है (और से लिया गया था)। हालांकि, तुरंत onMouseOver फ़ंक्शन को कॉल करने की बजाय, यह तब तक प्रतीक्षा करता है जब तक कि कॉल करने से पहले उपयोगकर्ता का माउस पर्याप्त धीमा हो जाए।

क्यों? एनिमेशन या AJAX कॉल की आकस्मिक फायरिंग में देरी या रोकथाम के लिए। सरल टाइमआउट छोटे क्षेत्रों के लिए काम करते हैं, लेकिन यदि आपका लक्ष्य क्षेत्र बड़ा है तो यह इरादे के बावजूद निष्पादित हो सकता है।

var config = {  
sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
interval: 200, // number = milliseconds for onMouseOver polling interval  
over: makeTall, // function = onMouseOver callback (REQUIRED)  
timeout: 500, // number = milliseconds delay before onMouseOut  
out: makeShort // function = onMouseOut callback (REQUIRED) 
}; 
$("#demo3 li").hoverIntent(config) 

विन्यास विकल्प

संवेदनशीलता: माउस मतदान अंतराल के बीच पिक्सेल की इस संख्या की तुलना में कम से यात्रा करते हैं, तो "पर" समारोह बुलाया जाएगा। 1 की न्यूनतम संवेदनशीलता दहलीज के साथ, माउस को मतदान अंतराल के बीच नहीं जाना चाहिए। उच्च संवेदनशीलता दहलीज के साथ आपको झूठी सकारात्मक प्राप्त होने की अधिक संभावना है। डिफ़ॉल्ट संवेदनशीलता: 7

अंतराल: मिलीसेकेंड की संख्या hoverIntent/पढ़ने के बीच इंतजार कर रहा है माउस निर्देशांक की तुलना। जब उपयोगकर्ता का माउस पहले तत्व में प्रवेश करता है तो इसके निर्देशांक रिकॉर्ड किए जाते हैं। जल्द ही "ओवर" फ़ंक्शन को एकल मतदान अंतराल के बाद बुलाया जा सकता है। मतदान अंतराल को उच्चतम सेट करने से पहले संभवतः "ओवर" कॉल से पहले देरी बढ़ेगी, लेकिन तुलना के अगले बिंदु तक भी समय बढ़ जाएगा। डिफ़ॉल्ट अंतराल: 100

ओवर: आवश्यक।वह फ़ंक्शन जिसे आप मूसओवर पर कॉल करना चाहते हैं। आपके फ़ंक्शन को "यह" और "ईवेंट" ऑब्जेक्ट प्राप्त होता है क्योंकि यह jQuery की होवर विधि से होगा।

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

आउट: आवश्यक। वह फ़ंक्शन जिसे आप मॉउसऑट पर कॉल करना चाहते हैं। आपके फ़ंक्शन को "यह" और "ईवेंट" ऑब्जेक्ट प्राप्त होता है क्योंकि यह jQuery की होवर विधि से होगा। नोट, होवरइन्टेंट केवल "आउट" फ़ंक्शन को कॉल करेगा यदि उसी ओवर पर "ओवर" फ़ंक्शन को कॉल किया गया हो।

Answer 4

$('.icon').on("mouseenter mouseleave","li.icon > ul",function(e){ 
    var $this = $(this); 
    if (e.type === 'mouseenter') { 
     clearTimeout($this.data('timeout')); 
     $this.slideDown('fast'); 
    }else{ // is mouseleave: 
     $this.data('timeout', setTimeout(function(){ 
      $this.slideUp('fast'); 
     },2000)); 
    } 
}); 

Answer 5

निम्नलिखित 2 सेकंड से आरंभ होने से फिसलने बंद हो जाएगा:

$('.icon').hover(function() { 
    $('li.icon > ul').delay(2000).slideDown('fast'); 
}, function() { 
    $('li.icon > ul').slideUp('fast'); 
}); 

Answer 6

मुझे लगता है कि इस कोड को अपनी जरूरत है:

jQuery(document).ready(function($) { 
    var navTimers = []; 
    $('.icon').hover(function() { 
      var id = jQuery.data(this); 
      var $this = $(this); 
      navTimers[id] = setTimeout(function() { 
       $this.children('ul').slideDown('fast'); 
       navTimers[id] = ""; 
      }, 300); 
     }, 
     function() { 
      var id = jQuery.data(this); 
      if (navTimers[id] != "") { 
       clearTimeout(navTimers[id]); 
      } else { 
       $(this).children("ul").slideUp('fast'); 
      } 
     } 
    ); 
}); 

Answer 7

या आप बस संक्रमण इस्तेमाल कर सकते हैं: सभी 2s आसानी से बाहर। सुनिश्चित करें कि आप विभिन्न ब्राउज़रों के लिए -webkit, -moz और -o जोड़ें।

Answer 8

मैं डेटा attribut बिना पाओलो Bergantino में जोड़ने के लिए आप यह कर सकते हैं कि चाहते हैं:

var timer; 
$('.icon').hover(function() { 
    clearTimeout(timer); 
    $('li.icon > ul').slideDown('fast'); 
}, function() { 
    timer = setTimeout(function() { 
     $('li.icon > ul').slideUp('fast'); 
    }, 2000); 
}); 

Answer 9

var timer; 

var delay = 200; 

$('#hoverelement').hover(function() { 

    on mouse hover, start a timeout 

    timer = setTimeout(function() { 

     Do your stuff here 

    }, delay); 

}, function() { 

    Do mouse leaving function stuff here  

    clearTimeout(timer); 
}); 

// संपादित करें: instert कोड