देरी जावास्क्रिप्ट होवर कार्रवाई

Question

मेरे पास मेरी साइट पर एक छवि है जिसमें एक jquery होवर कार्रवाई है। लेकिन उस क्षेत्र में गलती से माउस करना आसान है, और यदि आप इसे एक से अधिक बार करते हैं, तो होवर दिखाई देता है, गायब हो जाता है, दिखाई देता है, आदि, जब तक कि यह दिखाया न जाए और हर बार जब आप इसे देखते हैं तो गायब हो जाते हैं। क्या इसे बनाने का कोई तरीका है ताकि जब तक आप कुछ सेकंड तक नहीं हो जाते तब तक कार्रवाई नहीं होती है? मैं सिर्फ कार्रवाई में देरी नहीं करना चाहता, क्योंकि यह अभी भी हर माउसओवर के लिए होता है, मैं देखना चाहता हूं कि माउसओवर गिनती नहीं करता है जब तक कि आप कुछ सेकंड के लिए छवि पर न हों।

स्क्रिप्ट अब तक:

$("img.badge").hover(
function() { 
    $("h3.better").animate({"left": "125px"}, 1200); 
}, 
function() { 
    $("h3.better").animate({"left": "-500px"}, 800); 
}); 

Answer 1

आप setTimeout का उपयोग कार्रवाई शुरू करने के लिए कर सकते हैं और एक समारोह mouseout घटना पर clearTimeout बुला बाँध:

$('img.badge').hover(function(){ 
    window.mytimeout = setTimeout(function(){ 
     $("h3.better").animate({"left": "125px"}, 1200); 
    }, 2000); 
}, function(){ 
    clearTimeout(window.mytimeout);  
}); 

या आप कि के लिए एक प्लगइन इस्तेमाल कर सकते हैं, hoverintent की तरह।

Answer 2

पिछली एनीमेशन को रद्द करने के लिए एनिमेट करने से पहले .stop() का उपयोग करें। मुझे विश्वास है कि यह वही है जो आप खोज रहे हैं, और आपकी वर्तमान समस्या को हल करेंगे।

$("img.badge").hover(
function() { 
    $("h3.better").stop().animate({"left": "125px"}, 1200); 
}, 
function() { 
    $("h3.better").stop().animate({"left": "-500px"}, 800); 
}); 

Answer 3

तुम एक टाइमर का उपयोग मंडराना कार्रवाई आग नहीं कर सकते हैं जब तक आप इस तरह समय की एक निश्चित राशि hovered किया गया है और फिर, अगर मंडराना टाइमर सक्रिय होने से पहले छोड़ देता है, आप टाइमर स्पष्ट तो कुछ नहीं होता

$("img.badge").hover(function() { 
    var timer = $(this).data("hover"); 
    // if no timer set, set one otherwise if timer is already set, do nothing 
    if (!timer) { 
     // set timer that will fire the hover action after 2 seconds 
     timer = setTimeout(function() { 
      $("h3.better").stop(true).animate({"left": "125px"}, 1200); 
      $(this).data("hover", null); 
     }, 2000); 
     // save timer 
     $(this).data("hover", timer); 
    } 
}, function() { 
    var timer = $(this).data("hover"); 
    if (timer) { 
     clearTimeout(timer); 
     $(this).data("hover", null); 
    } else { 
     // probably would be better to make this an absolute position rather 
     // than a relative position 
     $("h3.better").stop(true).animate({"left": "-500px"}, 800); 
    } 
}); 

नोट:: मैं भी अपने एनीमेशन के लिए .stop(true) जोड़ा तो एनिमेशन पाइल कभी नहीं होगा यदि आप केवल समय की एक छोटी अवधि hovered कर रहे हैं।