¿Por qué esta animación onhover no se detiene?

Question

Estaba creando una muestra en la que tendremos cuatro bloques y cuando alguien pase sobre el bloque se deslizará hacia arriba para mostrar el contenido que hay detrás y cuando ocurra el evento de mouseout se deslizará hacia abajo. Esto es lo que hice:

http://jsbin.com/oluqu4

$(".garage span").hover(function(){ 
      $(this).animate({'height':'0px'},1000); 
      //$(this).clearQueue().animate({'height':'0px'},1500); 
       }, function() {     
      $(this).animate({'height':'100px'},1000); 
    //$(this).clearQueue().animate({'height':'100px'},1500); 
      }); 

HTML

<ul class="garage"> 
    <li id="shutter1"><span>1</span></li> 
    <li id="shutter2"><span>2</span></li> 
    <li id="shutter3"><span>3</span></li> 
    <li id="shutter4"><span>4</span></li>  
    </ul> 

El problema es la animación no está dispuesto a parar. La razón es cuando el bloque se desliza hacia arriba, dispara automáticamente el evento mouseout, pero ¿cómo detenerlo?

Además, avíseme si debería crear otra pregunta, me gustaría tener algún texto detrás del texto. No soy bueno en CSS así que por favor ayúdenme a hacer eso.

Answer 1

$(".garage li").hover(function(){ 
    $("span", this).animate({'height':'0px'},1000); 
     }, function() {     
     $("span", this).animate({'height':'100px'},1000); 
    }); 

Answer 2

Debería colocar el elemento emergente sobre el elemento Li en lugar del intervalo. De esa manera, su modo permanece sobre el área de Li incluso cuando el lapso se ha retirado. solo asegúrate de que tu Li tenga una altura que deje espacio para que el mouse tenga un área de vuelo estacionario una vez que se encoja.