error de jquery mouse hover, mouseover event siempre se activa unas cuantas veces en mouseout

Question

Tengo una cuadrícula de galería simple con un intervalo anidado que muestra el título, que quiero deslizar hacia arriba sobre el mouse, y ocultarlo sobre el mouse.

Todo funciona bien, excepto que cada vez que el mouse se mueve hacia abajo al lugar donde se encuentra el título y se aleja del azulejo desde la parte inferior, el efecto de desplazamiento se repite varias veces sin control.

Al principio pensé que podría ser porque el tramo está contenido dentro del ancla que es el gatillo de desplazamiento, pero moverlo tampoco funcionó.

¿Alguna idea?

El demo está aquí: http://www.winterealm.com/gallery/

de marcado:

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

Aquí está el 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

El problema aquí es que el mouseover se dispara cada vez que el mouse se mueve sobre el elemento o elementos secundarios. Intente utilizar el mouseenter y los eventos de mouseleave en su lugar.

Answer 2

por lo que puede poner en práctica un mecanismo de bloqueo muy simple, como en:

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

no es hermético en cuanto a la condición de la carrera, pero no es necesario.

Answer 3

Pruebe esto.

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

Puedes ver una demostración en vivo aquí. - http://jsfiddle.net/8Hd7s/