jquery माउस होवर प्रभाव बग, माउसओवर घटना हमेशा माउसआउट

Question

पर कुछ बार ट्रिगर करती है मेरे पास एक नेस्टेड अवधि के साथ एक साधारण गैलरी ग्रिड है जो शीर्षक दिखाता है, जिसे मैं माउस पर स्लाइड करना चाहता हूं, और माउस पर छिपाना चाहता हूं।

सबकुछ ठीक काम करता है, सिवाय इसके कि जब भी माउस शीर्षक पर जाता है और/या टाइल के नीचे से टाइल से बाहर निकलता है, तो होवर प्रभाव कुछ बार अनियंत्रित रूप से दोहराता है।

पहले मैंने सोचा कि ऐसा हो सकता है क्योंकि अवधि एंकर के भीतर निहित है जो होवर ट्रिगर है, लेकिन इसे बाहर ले जाना भी काम नहीं करता है।

कोई विचार?

डेमो यहाँ है: http://www.winterealm.com/gallery/

मार्कअप:

<div class="gallery_container"> 
    <ul> 
     <li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li> 
     <li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li> 
     <li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li> 
     <li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li> 
     <li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li> 
     <li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li> 
    </ul> 
</div> 

यहाँ jQuery

$(document).ready(function(){ 
    $('.gallery_container a').mouseover(function(){ 
     $(this).children('.title').animate({ 
      opacity: 100, 
      bottom: 0 
     },200); 
    }); 

    $('.gallery_container a').mouseout(function(){ 
     $(this).children('.title').animate({ 
      opacity: 0, 
      bottom: -30 
     },200); 
    }); 
}); 

Answer 1

समस्या यह है कि जब भी माउस तत्व या बच्चे तत्वों पर माउस चलाता है तो माउसओवर आग लगती है। बजाए माउसएन्टर और माउसलेव घटनाओं का उपयोग करने का प्रयास करें।

Answer 2

तो तुम एक बहुत आसान ताला तंत्र लागू करने के लिए, के रूप में चाहते हो सकता है है:

var fCurrentlyMoving = false;  
$('.gallery_container a').mouseover(function(){ 
    if (!fCurrentlyMoving) { 
     fCurrentlyMoving = true; 
     $(this).children('.title').animate({ 
      opacity: 100, 
      bottom: 0 
     },200, function() { 
      fCurrentlyMoving = false; 
     }); 
    } 
}); 

यह एयरटाइट रेस-कंडीशन-वार नहीं है, लेकिन इसकी आवश्यकता नहीं है।

Answer 3

इसे आजमाएं।

$(document).ready(function() { 
$('.gallery_container a').hover(function() { 
    $(this).children('.title').stop().animate({ 
     opacity: 100, 
     bottom: 0 
    }, 200); 
}, function() { 
    $(this).children('.title').stop().animate({ 
     opacity: 0, 
     bottom: -30 
    }, 200); 
}); 
}); 

आप यहां एक लाइव डेमो देख सकते हैं। - http://jsfiddle.net/8Hd7s/