माउस माउसलीव फ़ंक्शन ट्रिगर नहीं किया जा रहा है जब माउस तेज़ी से चलता है

Question

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

पीएस, माउस प्रवेश/छुट्टी का उपयोग करने का एकमात्र कारण यह है क्योंकि मुझे लगता है कि मुझे लाइव() का उपयोग करने की आवश्यकता है क्योंकि दस्तावेज़ों के लोड के बाद मेरे तत्व गतिशील रूप से जोड़े जाते हैं।

$('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){ 
    $(this).animate({ 
     top:25 
    }, 200, function(){ 
     $(this).find('.caption').stop(true, true).fadeIn(200); 
    });  
}).live('mouseleave',function(){ 
    $(this).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){ 
     $(this).parents('li').animate({ 
      top:30 
     },200);   
    }); 
}); 

Answer 1

संपादित

ठीक नई योजना!

इस प्रयास करें:

$('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){ 
    $(this).animate({ 
     top:25 
    }, 200, function(){ 
     $(this).find('.caption').stop(true, true).fadeIn(200); 
    });  
}).live('mouseleave',function(){ 
    $(this).stop(true, true).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){ 
     $(this).parents('li').animate({ 
      top:30 
     },200);   
    }); 
}); 

मुझे लगता है कि आप दो अलग-अलग वस्तुओं पर एनिमेशन चल रहे हैं पर क्लिक नहीं किया! इस बारे में अधिक आत्मविश्वास महसूस कर रहा है!

Answer 2

मैंने इसे पहले देखा है। जब आप माउस को तेज़ी से ले जाते हैं, तो यह सिर्फ एक नई जगह पर जाता है और माउसलीव एक्शन ट्रिगर नहीं करता है। jQuery का बस थोड़ा सा उपयोग करके मेरा समाधान यहां है। असल में, जब आप पिन पर होवर करते हैं, तो आपको उस खिड़की पर एक श्रोता बांधना होगा जो किसी भी माउस आंदोलन की तलाश करता है और जांच करता है कि आप अभी भी पिन पर होवर कर रहे हैं। मैं नहीं सोचता कि आप चाहते हैं कि यह श्रोता हर समय चल रहा हो, इसलिए मैंने इसे स्वयं को बंद कर दिया है।

$(".pin").live("mouseenter", function(event) { 
    var pin = $(event.target); 
    // show the caption 
    pin.addClass("hovered"); 

    $(window).bind("mousemove", function(event) { 
    var target = $(event.target); 
    if (!target.hasClass("hovered")) { 
     // hide the caption  
     $(".hovered").removeClass("hovered"); 
     $(window).unbind("mousemove"); 
    } 
    } 
}