Efekt błędu myszki jquery, efekt myszy zawsze uruchamia się kilka razy na mouseout

Question

Mam prostą siatkę galerii z zagnieżdżoną rozpiętością, która pokazuje tytuł, który chcę przesunąć myszką i ukryć na myszy.

Wszystko działa dobrze, z wyjątkiem sytuacji, gdy mysz przesuwa się w dół do miejsca, w którym znajduje się tytuł i/lub unosi się z kafelka od spodu płytki, a efekt unoszący się powtarza kilka razy w sposób niekontrolowany.

Początkowo pomyślałem, że może to być spowodowane tym, że rozpiętość jest zawarta w kotwicy, która jest spustem aktywującym, ale jej przeniesienie również nie działa.

Wszelkie pomysły?

Demo jest tutaj: http://www.winterealm.com/gallery/

Markup:

<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> 

Oto 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

Problem polega na tym, że ruch myszy jest uruchamiany za każdym razem, gdy mysz porusza się nad elementem lub elementami potomnymi. Zamiast tego spróbuj użyć zdarzeń mouseenter i mouseleave.

Answer 2

Więc może warto wdrożyć bardzo prosty mechanizm blokujący, tak jak w:

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

to nie jest hermetyczny wyścig, ale nie musi tak być.

Answer 3

Spróbuj tego.

$(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); 
}); 
}); 

Możesz zobaczyć demo na żywo tutaj. - http://jsfiddle.net/8Hd7s/