माउसओवर और माउसलेव ट्रिगर हर बार जब मैं माउस को दिए गए तत्व के अंदर माउस ले जाता हूं

Question

मैं ऐसी साइट बना रहा हूं जहां आप एक छवि पर माउस को घुमाते हैं और यह एक तत्व दिखाता है (इस मामले में इसकी ऊंचाई 0 से 154 पीएक्स तक बढ़ाकर)।

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){ 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
}); 

सामग्री फैलता है जब माउस प्रवेश करती है और गिर जब माउस पत्ते, लेकिन हर बार माउस तत्व सामग्री का विस्तार और गिर बार बार जब तक माउस तत्व छोड़ देता है भीतर ले जाया जाता है।

मुझे पहले कभी यह समस्या नहीं मिली है, और मैंने अतीत में इन कार्यों का उपयोग किया है, इसलिए मुझे क्या नुकसान हो रहा है, इस पर नुकसान हुआ है। कोई विचार?

संपादित करें:

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200); 
    }); 
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){ 
     jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200); 
    }); 
}); 

मैं अब कोड ऊपर का उपयोग कर रहा है और अभी भी ठीक उसी मुद्दा हो रही है। मैंने .stop फ़ंक्शन (झूठी, झूठी) (झूठी, सत्य) (सत्य, गलत) (सत्य, सत्य) की सभी भिन्नताओं को आजमाया है। समस्या प्रत्येक के साथ अलग-अलग होती है, लेकिन यह अभी भी होती है।

अंतिम संपादित करें:

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

Answer 1

फायरिंग एनीमेशन रोकता बजाय .mouseenter घटना का उपयोग कर .mouseover

की मुझे लगता है कि क्या करेंगे कोशिश करो!

Answer 2

आपके .animate() से पहले .stop() जोड़ना इससे ठीक करने में मदद करेगा। पिछले एनीमेशन रोक कर इस से अधिक बार उपयोगकर्ता तत्व पर अपने माउस ले जाता है, तो कई बार जल्दी से

Answer 3

आप mouseout

के बजाय mouseenter बजाय mouseover और mouseleave उपयोग करना पड़ सकता या आप कोशिश करते हैं और नीचे के रूप में .hover समारोह,

jQuery(document).ready(function(){ 
    jQuery("#dropdown-menu-create .dropimage").hover(function(){ //mouseenter 
     jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
    }, function(){ //mouseleave 
     jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200); 
    }); 
}); 

Answer 4

उपयोग कर सकते हैं जब से तुम एक कंटेनर पर इस लागू करने के लिए कोशिश कर रहे हैं , आपका सही ईवेंट हैंडलर mouseenter और mouseleave है।

उदाहरण:

$("#dropdown-menu-create .dropimage").mouseenter(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"154px"},200); 
}); 
$("#dropdown-menu-create .dropimage").mouseleave(function(){ 
    $("#dropdown-menu-create .toggle").animate({height:"0"},200); 
}); 

Answer 5

हालांकि यह पूरी तरह से प्रासंगिक नहीं हो सकता है, मैं एक ऐसी ही समस्या हुई। सबकुछ मैं div पर अपना सबसे अधिक स्थानांतरित कर दूंगा, घटना आग लग जाएगी। इसे हल करने के लिए, मुझे एहसास हुआ कि जब 'होवर' ईवेंट ट्रिगर किया गया था, तो टॉगलड div एक मेरा माउस खत्म हो गया था। इसे ठीक करने के लिए, मैंने बस उस पर एक घटना को माउस छोड़ने के लिए बाहर निकाला।

.profile-about { 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 5%; 
     left: 0; 
     z-index: 2; 
     display: none; 
    } 

.profile-image { 
    max-height: 300px; 
    max-width: 300px; 
    -webkit-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.75); 
} 

    $('.profile-image').hover(function(){ 
     $(this).next().fadeIn(100); 
    }); 

    $('.profile-about').mouseleave(function(){ 
     $(this).fadeOut(100); 
    }); 


    <img src="img/somebody.jpg" class="profile-image"> 
        <div class="profile-about"> 
         <p> 
         Hello I am somebody! 
         </p> 
        </div>